javascript - 使用原始 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>

• 创建一个函数
• 定位类 button-4
• 将一个均匀的监听器附加到鼠标点击
• 并播放 id 为的音频 cart_add_sound

//  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()"但我想以这种方式接近它以用于学习目的。

标签： javascript

Answer 1

我通过使用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); 
    }
}