我无法在javascript中的点击事件上运行函数[重复]答案

【问题标题】：I cannot make a function run on click event in javascript [duplicate]我无法在javascript中的点击事件上运行函数[重复]
【发布时间】：2022-01-15 18:30:10
【问题描述】：

我已经尝试了每种格式，但似乎没有任何效果，请帮助！

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js"></script>
</head>
<body>
    <button id="btn">Click me</button>
</body>
</html>

JavaScript：

let btn = document.getElementById('btn');

btn.addEventListener('click', func());

function func(){
    alert('hello');
};

它返回的错误是：

script.js:3 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at script.js:3:5

【问题讨论】：

移除事件监听器中的()。所以应该是：btn.addEventListener('click', func)
你需要推迟脚本<script src="script.js" defer>
我刚刚尝试过，它返回相同的错误。 - 回复 zer00ne
现在可以使用了，谢谢！快速提问，推迟脚本有什么区别？ - 回复 skara9
@SSS 当您延迟脚本时，它将等待您的 html 加载，然后再运行您的 js 代码——没有它，您的代码会在按钮加载到页面之前运行，所以您的 @987654327 @ 不起作用

标签： javascript html

【解决方案1】：

Js脚本应该在模板完全加载后执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">Click me</button>
    <script src="script.js"></script>

</body>
</html>

【讨论】：