JavaScript按钮点击事件问题：新手求助代码无法运行的解决方法

嘿，我来帮你排查下问题～你这段代码没法运行主要有两个关键原因：

1. DOM元素根本没有clicked这个属性：你试图通过document.getElementById("btn").clicked == true来判断按钮是否被点击，但这个属性并不存在于HTML按钮元素上，所以这个条件永远不会成立。
2. 代码只会执行一次：这段判断代码在页面加载时只会跑一遍，之后就算你点击按钮，也不会再触发这个判断了——你需要的是给按钮绑定一个点击事件监听器，让它在每次被点击时都执行你的代码。

下面给你几种常用的正确写法，任选一种都可以解决问题：

方法一：使用addEventListener（推荐的现代写法） #

这种写法是目前最规范的事件绑定方式，它支持给同一个元素绑定多个相同类型的事件，而且和HTML结构分离，更易维护：

// 先等页面DOM完全加载完成，再获取按钮元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮元素
  const btn = document.getElementById('btn');
  // 给按钮绑定点击事件
  btn.addEventListener('click', function() {
    console.log("working");
    // 这里写你要执行的其他代码
  });
});

对应的HTML：

<button id="btn">ClickEvent</button>

方法二：直接使用onclick属性（简单快捷） #

如果你需要快速实现功能，可以直接在HTML按钮上绑定点击函数，或者在JS里设置元素的onclick属性：

写法A：HTML内直接绑定 #

<button id="btn" onclick="handleBtnClick()">ClickEvent</button>

<script>
function handleBtnClick() {
  console.log("working");
  // 你的其他代码
}
</script>

写法B：JS里设置onclick #

document.addEventListener('DOMContentLoaded', function() {
  const btn = document.getElementById('btn');
  btn.onclick = function() {
    console.log("working");
  };
});

额外提示：关于DOM加载顺序 #

如果你的JS代码写在页面的<head>标签里，浏览器会先执行JS，这时候按钮还没被解析出来，getElementById会返回null，导致绑定失败。解决这个问题的两种方式：

• 把JS代码放在按钮元素的后面（比如页面底部）
• 使用上面示例里的DOMContentLoaded事件，等待DOM加载完成后再执行JS代码

内容的提问来源于stack exchange，提问作者Manoj A