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將一個按鈕添加到列表框

回答

相關問題