在 Javascript 中访问任何 DOM 按钮以应用于 addEventListener 事件可能有什么问题?

Question

我通过 ID 访问 html 源代码中的按钮，将事件侦听器(在 IIFE 中(添加到 Javascript 中的键，但它显示错误并显示以下消息：

"无法读取空元素的 AddeventListener 的属性;

var controller = (function() {
document.querySelector('btn2').addEventListener('click', function() {
console.log('hello');
});
})();

<button id="btn2" value="value1"><i class="fa fa-check"></i></button></div>

Answer 1

你正在使用document.querySelector按ID获取元素，为此，你需要在ID之前添加一个#。document.querySelector('btn2')-->document.querySelector('#btn2').我建议您用document.getElementById替换document.querySelector，因为它更快，而且是您应该使用的。

var controller=(function()
{
document.getElementById('btn2').addEventListener('click',function()
{
console.log('hello');
});
})();

<button id="btn2" value="value1" ><i class="fa fa-check"></i></button></div>

Answer 2

如果使用 querySelector，则需要告诉选择器应该是什么，例如，要使用 id 选择元素，则需要添加 '#'。

document.querySelector('#id');