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 の代わりであり、(このオーディオ プレーヤーのインスタンスが複数あるため) クラスを指定し、getElementById の代わりに getElementsByClassName を使用しました。getElementsByClassName は現在、すべてのブラウザーと互換性があると思いましたか? 最新の Firefox を使用しています。

4

1 に答える 1

4

document.getElementsByClassName()ページにそのクラス名を持つ要素が 1 つしかない場合でも、要素のコレクションを返すと確信しています。したがって、実際にはイベント リスナーをオーディオ要素に適用するのではなく、要素の配列を適用します。

クラス サウンドの要素が常に 1 つしかない場合は、 を試してくださいvar sound = document.getElementsByClassName("music")[0];。

于 2013-03-03T02:11:50.607 に答える