为什么我必须按两次按钮才能播放音频？

Question

我制作了一个带有一些按钮的简单程序。当用户单击按钮时，他们应该听到相应的声音。

第一次按下任何给定的按钮。必须按两次该按钮才能听到声音。此后每次按下按钮一次都将起作用。

我对此没有使用jquery或javascript的经验。在大多数情况下，复制并粘贴我在网上发现的不同示例以获取现在的信息。

<style>
    p.hideme {display: none;}
</style>

<input type="button" class="btn btn-info" id="3" value="Sound 3" onclick=" play_sound3()">

<p class="hideme">
    <audio controls id="linkAudio3">
        <source src="sounds/sound3.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
 </p>

<script>
    function play_sound3()
    {
        document.getElementById("3").addEventListener("click", function () {
        document.getElementById("linkAudio3").play();
  });
} 
</script>

预期的行为是，当按下按钮时，应该播放声音。

实际上发生的是，在第一次按下任何按钮时，必须按下两次按钮才能播放声音

此后，程序将按预期工作。

Answer 1

您有两个事件处理程序；一个在您的按钮上：

<input type="button" class="btn btn-info" id="3" value="Sound 3" onclick=" play_sound3()">

以及该按钮调用的函数中的一个：

document.getElementById("3").addEventListener("click", function ()

不仅每次您单击按钮时，这都会反复添加多个事件处理程序，这是您遇到双击问题的原因。

我建议删除内联事件处理程序，仅创建放置在文档末尾的单个事件处理程序，如：

<script>
document.getElementById("3").addEventListener("click", function () {
    document.getElementById("linkAudio3").play();
} 
</script>

*此外，避免使用数字ID ...