gpt4 book ai didi

javascript - JS在列表框中添加按钮

转载 作者:行者123 更新时间:2023-12-03 01:45:03 26 4
gpt4 key购买 nike

我正在编写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>

提前致谢!

最佳答案

我创建了一个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>

关于javascript - JS在列表框中添加按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44250819/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com