JavaScript addEventListener失效：按钮点击事件无响应求助
2026-5-27
按钮点击事件无响应的问题解决
嘿，我来帮你搞定这个问题！首先页面加载时alert("Connected")能正常触发，说明你的JS文件和HTML页面的连接完全没问题——问题出在DOM元素的获取上，而且还有个小小的拼写错误哦！
问题根源
你用了document.getElementByTagName，这里有两个关键问题：
- 方法名拼写错误：正确的方法名是
document.getElementsByTagName（注意Element后面要加s，是复数形式） - 返回值类型错误：这个方法返回的是一个HTMLCollection（类数组对象），不是单个的DOM元素。你直接给这个集合调用
addEventListener，自然会失效，因为集合本身没有这个方法。
你可以打开浏览器的开发者工具（按F12，切换到「控制台」标签），肯定能看到类似button.addEventListener is not a function的报错提示，这就是问题的直接证据~
修正方案
这里给你几种可行的解决办法，选你觉得顺手的就行：
方案1：修正方法名并取集合的第一个元素
因为你的页面里只有一个body和一个button，直接取集合的索引[0]就能拿到对应的单个元素：
alert("Connected"); // 修正方法名，取第一个body元素 var body = document.getElementsByTagName("body")[0]; // 修正方法名，取第一个button元素 var button = document.getElementsByTagName("button")[0]; button.addEventListener("click", function() { alert("Clicked"); body.style.background = "pink"; });
方案2：用document.querySelector更简洁
querySelector方法会直接返回匹配选择器的第一个元素，不用处理类数组，代码更简洁：
alert("Connected"); var body = document.querySelector("body"); var button = document.querySelector("button"); button.addEventListener("click", function() { alert("Clicked"); body.style.background = "pink"; });
方案3：给按钮加ID，用getElementById精准获取
如果以后页面里有多个按钮，这种方式会更不容易出错：
先修改HTML代码，给按钮加个ID：
<html> <body> <button id="clickButton">Click me</button> </body> <script src="experimenting2.js"></script> </html>
然后修改JS代码：
alert("Connected"); var body = document.querySelector("body"); var button = document.getElementById("clickButton"); button.addEventListener("click", function() { alert("Clicked"); body.style.background = "pink"; });
小提示
以后遇到JS不生效的情况，第一时间打开浏览器控制台看报错信息，大部分问题都能通过报错快速定位哦！
内容的提问来源于stack exchange，提问作者BoSsYyY
