基本的Vanilla Javascript示例不起作用

Question

请有人解释为什么这不起作用？

HTML

<p>
    <button class="selectable">Button</button>
</p>

的Javascript

var selectable = document.getElementsByClassName('selectable');

selectable.onclick = function() {
    alert("Success");
}

https://jsfiddle.net/qpmsw5yg/

谢谢，

贾斯汀

Answer 1

selectable是HTMLCollection而不是Element。所以你应该听selectable[0]。

更新了JSFiddle：https://jsfiddle.net/NeekGerd/qpmsw5yg/1/

Answer 2

因为document.getElementsByClassName返回一个集合。如果要在节点上设置处理程序，则必须指定单个节点。

function onSelectableClick() {
    alert('Success');
}

var selectables = document.getElementsByClassName('selectable');
for (var i = 0; i < selectables.length; i++) {
    selectables[i].onclick = onSelectableClick;
}