我的 javascript 事件监听器不工作

Question

我尝试添加一个事件监听器来检查是否有人点击，但它给了我这个错误：

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at main (main.js:7:10)
    at main.js:12:1

我的代码如下所示：

function main() {
    //variables
    const bttn = document.getElementById("button");
    var clicks = 0;

    //event listeners
    bttn.addEventListener("click", function() {
        clicks++;
        console.log(clicks);
    })
}
main()

我尝试调试它，但因为我对此很烂，所以无法修复此错误。

Answer 1

aaa兄弟我知道这个。所以基本上代码是在 html 加载之前执行的，所以什么也没有。所以你的 document.getelementbyid 东西没有返回任何内容（null）。我们必须将代码放入 DOMContentLoaded 事件中

window.addEventLisntener('DOMContentLoaded', (event)=>{
      
     //your code goes here

})

您的完整代码应如下所示：-

window.addEventListener('DOMContentLoaded', (event)=>{
  function main() {
        //variables
        const bttn = document.getElementById("button");
        var clicks = 0;
    
        //event listeners
        bttn.addEventListener("click", function() {
            clicks++;
            console.log(clicks);
})
    }
    main()
    })

它的作用是确保加载内容后执行代码。 希望这有帮助，我是初学者。 谢谢你