document.getElementById(...) is null

最新推荐文章于 2023-11-02 16:32:56 发布

weixin_30569001

最新推荐文章于 2023-11-02 16:32:56 发布

阅读量442

点赞数

CC 4.0 BY-SA版权

文章标签：爬虫

原文链接：http://www.cnblogs.com/awaTangjay/p/6673329.html

本文介绍了一个常见的JavaScript编程问题：为何直接在HTML文件中定义按钮点击事件会导致错误，并提供了解决方案，即将事件处理函数置于window.onload匿名函数内，确保DOM元素加载完成后再绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
    <head>
        <script type="text/javascript">
            document.getElementById('btn1').onclick=function(){
                alert('helleo');
            };
        </script>
    </head>
    <body>
        <input type="button" name="name" value="button" id="btn1"/>
    </body>
</html>

如果js代码像上面这样写就会报错：document.getElementById(...) is null，原因是按从上到下得执行顺序，执行js代码得时候还没有注册id为btn1得button，所以根据id获得得对象就为空，所以得将上面得js代码写到一个window.onload方法里面，意思是页面加载完毕以后再执行内部得js代码

<html>
    <head>
        <script type="text/javascript">
        window.onload=function(){
            document.getElementById('btn1').onclick=function(){
                alert('helleo');
            };
        };
        </script>
    </head>
    <body>
        <input type="button" name="name" value="button" id="btn1"/>
    </body>
</html>

转载于:https://www.cnblogs.com/awaTangjay/p/6673329.html