javascript中为什么除了灯泡的事件之外其他的事件都没有反应？如何解决？

原创于 2025-07-04 22:15:00 发布 · 1.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #灯泡事件

bug专栏专栏收录该内容

159 篇文章

订阅专栏

🏆本文收录于《全栈Bug调优(实战版)》专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！

📌 特别说明： 文中部分技术问题来源于真实生产环境及网络公开案例，均经过精挑细选与系统化整理，并结合多位一线资深架构师和工程师多年实战经验沉淀，提炼出多种经过验证的高可行性解决方案，供开发者们参考与借鉴。

欢迎 关注、收藏并订阅本专栏，持续更新的干货内容将与您同行，让我们携手精进，技术跃迁，步步高升！

全文目录：

📢 问题描述

问题来源：https://ask.csdn.net/questions/8480193

问题描述：javascript中为什么除了灯泡的事件之外其他的事件都没有反应？如何解决？

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
</head>
<body>
 
    <img id="light" src="./img/off.png" alt="" width="200" height="200">
    <br>
    <input type="button" id="turnOn" value="点亮" onclick="on()">
    <input type="button" id="turnOff" value="熄灭" onclick="off()">
 
    <input type="text" name="write" value="ITHM" onfocus="lowercaps()" onblur="caps()">
    
    <input type="checkbox" id="hobby">电影
    <input type="checkbox" id="hobby">游戏
    <input type="checkbox" id="hobby">看美女
 
    <input type="button" id="T" value="全选" onclick="t()">
    <input type="button" id="F" value="全不选" onclick="f()">
</body>
 
<script>
 
    var img= document.getElementById("light");
    function on(){
        img.src="./img/on.png";
    }
    function off(){
        img.src="./img/off.png";
    }
 
    var write=document.getElementsByName("write");
    function lowercaps(){
        write.value=input.value.toLowerCase();
    }
    function caps(){
        white.value=input.value.toUpperCase();
    }
 
    var checks=document.getElementById("hobby");
    function t(){
        for(let i=0;i<checks.length;i++){
            
            checks[i].checked=true;
        }
    }
    function f(){
        for(let i=0;i<checks.length;i++){
            checks[i].checked=false;
        }
    }
 
</script>
</html>

📣 请知悉：如下方案不保证一定适配你的问题！

如下是针对上述问题进行专业角度剖析答疑，不喜勿喷，仅供参考：

你的代码有几个问题导致除了灯泡事件外其他事件没有反应。以下是问题和解决方案：

问题1：复选框选择问题

你使用了 getElementById("hobby") 来获取复选框，但：

多个元素不能有相同的ID（ID应该是唯一的）
getElementById 只返回单个元素，不是集合

问题2：文本输入框处理问题

你使用了 getElementsByName("write") 但后面错误地使用了 write.value
函数中使用了未定义的 input 变量
第二个函数中拼写错误 white.value 应该是 write.value

修正后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="light" src="./img/off.png" alt="" width="200" height="200">
    <br>
    <input type="button" id="turnOn" value="点亮" onclick="on()">
    <input type="button" id="turnOff" value="熄灭" onclick="off()">

    <input type="text" id="write" name="write" value="ITHM" onfocus="lowercaps()" onblur="caps()">
    
    <input type="checkbox" class="hobby">电影
    <input type="checkbox" class="hobby">游戏
    <input type="checkbox" class="hobby">看美女

    <input type="button" id="T" value="全选" onclick="t()">
    <input type="button" id="F" value="全不选" onclick="f()">
</body>

<script>
    // 灯泡功能
    var img = document.getElementById("light");
    function on(){
        img.src="./img/on.png";
    }
    function off(){
        img.src="./img/off.png";
    }

    // 文本框功能
    var writeInput = document.getElementById("write");
    function lowercaps(){
        writeInput.value = writeInput.value.toLowerCase();
    }
    function caps(){
        writeInput.value = writeInput.value.toUpperCase();
    }

    // 复选框功能
    var checks = document.getElementsByClassName("hobby");
    function t(){
        for(let i=0; i<checks.length; i++){
            checks[i].checked = true;
        }
    }
    function f(){
        for(let i=0; i<checks.length; i++){
            checks[i].checked = false;
        }
    }
</script>
</html>

主要修改：

将复选框的 id="hobby" 改为 class="hobby"，并使用 getElementsByClassName 获取
为文本框添加了ID，并正确引用
修正了文本框处理函数中的变量引用和拼写错误

这些修改应该能让所有功能正常工作。

希望如上措施及解决方案能够帮到有需要的你。

PS：如若遇到采纳如下方案还是未解决的同学，希望不要抱怨&&急躁，毕竟影响因素众多，我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴，即把你未解决或者产生新Bug黏贴在评论区，我们大家一起来努力，一起帮你看看，可以不咯。

若有对当前Bug有与如下提供的方法不一致，有个不情之请，希望你能把你的新思路或新方法分享到评论区，一起学习，目的就是帮助更多所需要的同学，正所谓「赠人玫瑰，手留余香」。

🧧🧧 文末福利，等你来拿！🧧🧧

如上问题有的来自我自身项目开发，有的收集网站，有的来自读者…如有侵权，立马删除。再者，针对此专栏中部分问题及其问题的解答思路或步骤等，存在少部分搜集于全网社区及人工智能问答等渠道，若最后实在是没能帮助到你，还望见谅！并非所有的解答都能解决每个人的问题，在此希望屏幕前的你能够给予宝贵的理解，而不是立刻指责或者抱怨！如果你有更优解，那建议你出教程写方案，一同学习！共同进步。

ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏《全栈Bug调优(实战版)》，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。

码字不易，如果这篇文章对你有所帮助，帮忙给 bug菌来个一键三连(关注、点赞、收藏) ，您的支持就是我坚持写作分享知识点传播技术的最大动力。

同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」 ；以第一手学习bug菌的首发干货，不仅能学习更多技术硬货，还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料，你想要的我都有！

🫵 Who am I?

我是bug菌，CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云等社区博客专家，C站博客之星Top30，华为云多年度十佳博主，掘金多年度人气作者Top40，掘金等各大社区平台签约作者，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 30w+；更多精彩福利点击这里；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿。