如何在网站中添加多个对应不同音效的按钮并修复现有不生效代码

问题原因 #

• document.querySelector() 方法默认全局匹配第一个符合条件的元素，你两处代码都用document.querySelector('button')获取元素，最终两个点击事件都绑定到了页面第一个按钮上，第二个按钮没有绑定事件所以无法触发音效。
• 在每个div里单独写script块的写法冗余，也容易出现作用域问题，不推荐这么使用。

修正方案 #

你可以给每个按钮加自定义属性关联对应的音频id，统一绑定一次事件即可，修正后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BUTTONS AND SOUNDS</title>
</head>
<body>
    <h1>Sound Effects</h1>
    <div class="phrase1">
        <audio id='phrase1'>
            <source src="sound1.wav">
        </audio>
        <button data-audio-id="phrase1">Play 1!</button>
    </div>
    <div class="phrase2">
        <audio id='phrase2'> 
            <source src="sound2.wav">
        </audio>
        <button data-audio-id="phrase2">Play 2!</button>
    </div>
    <script>
        // 一次性获取所有按钮，批量绑定事件
        const allButtons = document.querySelectorAll('button')
        allButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 获取当前按钮关联的音频id
                const audioId = this.getAttribute('data-audio-id')
                const audio = document.querySelector(`#${audioId}`)
                audio.currentTime = 0
                audio.play()
            })
        })
    </script>
</body>
</html>

如果不想修改原结构太多，也可以把每个script里的选择器限制在当前div范围内，比如第二个按钮的选择器改成document.querySelector('.phrase2 button')即可生效，但还是推荐上面统一绑定的写法，后续新增按钮只要加对应的data-audio-id属性就可以直接使用，不用额外新增script块。

内容的提问来源于stack exchange，提问作者orbitB374