JSリストボックスにボタンを追加する

JSアプリケーションを作成していて、ユーザーが選択したコンテンツを追加するリストボックスを作成しようとしています。これは次のようなものです：JSリストボックスにボタンを追加する

内容1 | + コンテンツ2 | + ... コンテンツ5 | +

ここで、コンテンツはonclickボタンで、ユーザーがクリックするとサウンドが、+が追加ボタンになり、そのコンテンツをリストに追加します。

これは私が今で働いているものです：事前に

<!DOCTYPE html> 
<html> 
<head> 

<script> 
var cmajor = new Audio(); 
var cminor = new Audio(); 
var c_augmented = new Audio(); 
var c_diminished = new Audio(); 

cmajor.src = "cmajor.mp3"; 
cminor.src = "cminor.mp3"; 
c_augmented.src = new "c_augmented.mp3" 
c_diminished.src = new "c_diminished.mp3" 

function PlaySound(acorde) { 
    switch (acorde) { 
    case 'cmajor': 
     cmajor.play(); 
     break; 
    case 'cminor': 
     cminor.play(); 
     break; 
    case 'c_augmented': 
     c_augmented.play(); 
     break; 
    case 'c_diminished': 
     c_diminished.play(); 
     break; 
    } 
} 
</script> 

</head> 
<body> 

<audio id="cmajor"> </audio> 
<button onclick="PlaySound('cmajor')"> C major </button> 
<button type="button" onclick="alert('Hello world!')">+</button> 

<audio id="cminor"> </audio> 
<button onclick="PlaySound('cminor')"> C minor </button> 
<button type="button" onclick="alert('Hello world!')">+</button> 

<audio id="c_augmented"> </audio> 
<button onclick="PlaySound('c_augmented')"> C augmented </button> 
<button type="button" onclick="alert('Hello world!')">+</button> 

<audio id="c_diminished"> </audio> 
<button onclick="PlaySound('c_diminished')"> C diminished </button> 
<button type="button" onclick="alert('Hello world!')">+</button> 

</body> 
</html>

ありがとう！

出典

2017-05-29 Joaquin Iglesias Lugon

私はjsfiddleを作成しました。

あなたが探していたものかどうか教えてください。

https://jsfiddle.net/422Lojct/28/

var cmajor = new Audio(); 
var cminor = new Audio(); 
var c_augmented = new Audio(); 
var c_diminished = new Audio(); 

cmajor.src = "cmajor.mp3"; 
cminor.src = "cminor.mp3"; 
c_augmented.src = "c_augmented.mp3"; 
c_diminished.src = "c_diminished.mp3"; 

function PlaySound(acorde) { 
    switch (acorde) { 
    case 'cmajor': 
     cmajor.play(); 
     break; 
    case 'cminor': 
     cminor.play(); 
     break; 
    case 'c_augmented': 
     c_augmented.play(); 
     break; 
    case 'c_diminished': 
     c_diminished.play(); 
     break; 
    } 
} 

function addList(item) { 
    console.log(item); 
    document.getElementById('listBox').appendChild(item); 
}

HTML

<body> 

    <audio id="cmajor"> </audio> 
    <button onclick="PlaySound('cmajor')"> C major </button> 
    <button type="button" onclick="addList(cmajor)">+</button> 

    <audio id="cminor"> </audio> 
    <button onclick="PlaySound('cminor')"> C minor </button> 
    <button type="button" onclick="addList(cminor)">+</button> 

    <audio id="c_augmented"> </audio> 
    <button onclick="PlaySound('c_augmented')"> C augmented </button> 
    <button type="button" onclick="addList(c_augmented)">+</button> 

    <audio id="c_diminished"> </audio> 
    <button onclick="PlaySound('c_diminished')"> C diminished </button> 
    <button type="button" onclick="addList(c_diminished)">+</button> 

    <div id="listBox"> 

    </div> 
</body>

出典

2017-05-29 23:09:04 user2205967

私が何か間違ったことをやっているかどうかは知りませんが、あなたが書いたコードは、私のために働いていません。 –

JSリストボックスにボタンを追加する

答えて

関連する問題