0

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

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。

4

1 回答 1

4

我很确定document.getElementsByClassName()会返回一组元素，即使页面上只有一个具有该类名的元素。因此，您实际上并没有将事件侦听器应用于音频元素，而是元素数组。

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

于 2013-03-03T02:11:50.607 回答