javascript - getElementsByClassName onclick 问题

Question

我想知道如何使用 getElementByClassName 检测按钮是否被单击。该按钮没有 ID，是作为嵌入式 iframe 的一部分生成的。

<button class="playButton medium" role="application" title="Play" style="color: rgb(204)</button>

我正在尝试这个脚本，如果单击按钮，它会提醒，但它似乎对我不起作用。

var x = document.getElementByClassName("playButton medium");
for (var i=0; i < x.length; i++) {
  x[i].onclick = function() {
    alert("clicked");
  }
};

谢谢你的建议

Answer 1

首先是 getElementsByClassName()，注意 s 的复数形式。其次，您只能提供一个类作为该函数的参数。此外，最好使用 addEventListener() 而不是 on* 事件属性。试试这个:

var x = document.getElementsByClassName("playButton");
for (var i = 0; i < x.length; i++) {
  x[i].addEventListener('click', function() {
    console.log("clicked");
  });
};

<button class="playButton medium" role="application" title="Play" style="color: rgb(204)">Play</button>

如果您想使用这两个类来选择元素，您可以改用 document.querySelectorAll('.playButton.medium')。