添加到购物车上带有原始javascript的音频

Question

我的选择到底有什么问题？

<a href="#" class="button-4 w-button"></a>

<audio id="cart_add_sound" controls="" preload="auto" hidden="hidden"> <source src="img/cart_add.wav"
type="audio/wav"> </audio>

创建一个function

• targeting类button-4

• ，将一个均匀侦听器附加到鼠标，单击

• ，并使用id为cart_add_sound

F 212播放音频

//  Play Audio on Add to Cart
  function playAudio() {
    var play = document.querySelector('.button-4')
    play.addEventListener('click', function() {  
        document.getElementById('cart_add_sound').play();
    }, true); 
}

我知道我可以在html5 onclick="audio.play()"中使用，但为了学习目的，我想这样做。

Answer 1

您应该初始化/执行这个函数，例如，在DOM准备好之后：

// Play Audio on Add to Cart
function playAudio() {
    var play = document.querySelector('.button-4')
    play.addEventListener('click', function() {  
        document.getElementById('cart_add_sound').play();
    }, true); 
}

// DOM ready event
document.addEventListener('DOMContentLoaded', (event) => {
    playAudio();
});

你在什么地方查过吗？

演示- https://codepen.io/vyspiansky/pen/BaKKdvW

Answer 2

我通过使用getElementsByClassName并循环遍历所有元素来修复它。

//  Play Audio on Add to Cart
  function playAudio() {
    var plays = document.getElementsByClassName('button-4')
    for (var i = 0; i < plays.length; i++) {
        var play = plays[i]
    play.addEventListener('click', function() {  
        document.getElementById('cart_add_sound').play();
        }, true); 
    }
}