javascript - 单击按钮，播放声音，但按钮消失

Question

就像我在标题中所说的那样。我想要播放不同的声音，但由于某种原因，按钮上的文字在声音播放后消失了。按钮仍然有效。我需要按钮保持完整。

当按钮被点击时，还有没有让页面重新加载？

这是我的代码：

javascript:

function playSound() {
    var sounds = new Array(
    "battle.mp3"
);

$("button").html("<embed src=\""+sounds[Math.floor(Math.random()*(sounds.length+1))]+"\" hidden=\"true\" autostart=\"true\" />");

HTML

<div id="element">
<button onclick="javascript:playSound()">Try it</button>
</div>

Answer 1

我相信该按钮正在消失，因为您正在用嵌入代码替换它的 HTML。您是否尝试过创建不同的元素（例如 div）并改为定位该元素？

Answer 2

您似乎正在替换playSound函数中按钮元素内的 HTML 内容（请参见此处）。尝试将其嵌入到其他元素中，例如占位符div。

对于不重新加载页面，false请从您的playSound()函数返回

Answer 3

就像其他人说的那样，您正在更换元素。尝试将javascript更改为：

function playSound() {
    var sounds = new Array("battle.mp3");

    $("#soundDiv").html("<embed src=\""+sounds[Math.floor(Math.random()*(sounds.length+1))]+"\" hidden=\"true\" autostart=\"true\" />");

    return false;
}       

和 html 到：

<div id="element">
    <div id="soundDiv"></div>
    <button onclick="javascript:playSound()">Try it</button>
</div>