javascript - getElementsByClassName onclick问题

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

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

我正在尝试此脚本，如果单击该按钮，该脚本将为alert，但它似乎对我不起作用。

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

谢谢你的建议

最佳答案

首先是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')。