Question

var  btn = document.querySelectorAll('.button');

 function  test() {
    alert('hello')
}


btn.addEventListener("click", test);

点击“按钮”后，应该调用test函数，不是它。

Answer 1

＆＃39; .button＆＃39;将使用名为＆＃39; button＆＃39;的类搜索所有元素。如果您要搜索按钮元素，则应编写：document.querySelectorAll（＆＃39; button＆＃39;）

此外，querySelectorAll给出了nodeList。对于此代码：

<button id="myBtn">Try it</button>
<button id="myBtn2">Try it</button>
<script>
    var  btn = document.querySelectorAll('button');
    console.log(btn);
</script>

返回将是NodeList [button＃myBtn，button＃myBtn2]，因为你可以看到它是一个数组。

Answer 2

document.querySelectorAll将返回元素列表。你需要将click事件应用于各个元素。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

＆＃13;

var  btn = document.querySelectorAll('.button');
console.log(btn[0]);
 function  test() {
    alert('hello')
}


btn[0].addEventListener("click", test);

＆＃13;

<div class = 'button'>Button</div>

＆＃13;

为什么onclick不起作用？

2 个答案: