Question

以下代码有效（警告弹出）：

var sound = document.getElementById("music");
    sound.addEventListener("play", function () {
    alert("playing");
});
....
....
<audio controls id="music">
    <source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"/>
</audio>

但为什么这不起作用？

var sound = document.getElementsByClassName("music");
    sound.addEventListener("play", function () {
    alert("playing");
});
....
....
<audio controls class="music">
    <source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"/>
</audio>

如果getElementsByClassName返回的内容与getElementById不同，则不起作用：

('.sound').addEventListener("play", function () {
    alert("playing");
});
....
....
<audio controls class="music">
    <source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"/>
</audio>

我所改变的只是一个ID而不是ID，我给它一个类（因为我有这个音频播放器的多个实例），并使用了getElementsByClassName而不是getElementById。我以为getElementsByClassName现在与所有浏览器兼容？我正在使用最新的Firefox。

Answer 1

我很确定document.getElementsByClassName()会返回一个元素集合，即使页面上只有一个带有该类名的元素。所以你实际上并没有将事件监听器应用于音频元素，而是应用了一系列元素。

如果只有一个类声音元素，请尝试var sound = document.getElementsByClassName("music")[0];。

getElementsByClassName不起作用，但getElementById是

1 个答案: