时间戳

首页 > 解决方案 > 只有第二个音频播放 JavaScript onclick 事件

javascript - 只有第二个音频播放 JavaScript onclick 事件

问题描述

我正在尝试向我的网站添加声音效果，当他们单击正确的图像时会产生正面效果，而当他们单击错误的图像时会产生负面效果。目前，两次点击都只播放负面声音，或者根据我放置声音的顺序，播放正面声音。这是我的html：

<audio controls autoplay hidden id="correct">
    <source src="positive.mp3" type="audio/mpeg">
</audio>

<audio controls autoplay hidden id="wrong">
    <source src="negative.mp3" type="audio/mpeg">
</audio>
    
<div class="popup" onclick="myFunction(); playPositive()"> <img src="true.png">
    <span class="popuptext" id="myPopup">CORRECT</span>
</div>

<div class="popup" onclick="myFunction(); playNegative()"> <img src="false.png"
    <span class="popuptext" id="myPopup">INCORRECT</span>
</div>

这是我的 Javascript：

var myMusic= document.getElementById("correct");
function playPositive() {
    myMusic.play();
}

var myMusic= document.getElementById("wrong");
function playNegative() {
    myMusic.play();
}

为什么即使我点击正确的图像和错误的图像，它也只使用第二个声音来实现这两个功能？

标签： javascripthtmlaudioonclick

解决方案

那是因为您对两个音频元素使用相同的变量名称：

像这样修复它：

var myCorrectMusic= document.getElementById("correct");
function playPositive() {
    myCorrectMusic.play();
}

var myWrongMusic= document.getElementById("wrong");
function playNegative() {
    myWrongMusic.play();
}

推荐阅读