js中Uncaught TypeError: Cannot set property 'innerHTML' of null问题解决方法：

最新推荐文章于 2024-05-31 17:40:50 发布

faine℃

最新推荐文章于 2024-05-31 17:40:50 发布

阅读量9.9k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41828282/article/details/99285718

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <button type="button" id="demo" onclick="myClick()">单击</button>
    <button type="button" id="demo1" >试一试</button>
    <p id="demo2"></p>
</body>
</html>

js文件如下：

 function myClick() {
        alert("hello world");
        document.getElementById("demo").innerHTML = "222222";
    }
    
    document.getElementById("demo1").addEventListener("click", displayDate);
    function displayDate() {
        document.getElementById("demo2").innerHTML = Date();
    }

如上两端代码所示，在浏览器中运行时，会出现 Cannot set property 'addEventLister' of null问题，原因是在html程序时由上而下执行，运行到document.getElementById("demo1").addEventListener("click", displayDate)时，没有找到"demo1"这个元素，所以就会提示错误信息（“null”）,所以运行时代码没有任何效果，解决方法如下：

将document.getElementById("demo1").addEventListener("click", displayDate)语句放在window.onload = function(){}中，：

window.onload = function(){
  document.getElementById("demo1").addEventListener("click", displayDate);

  function displayDate() {
     document.getElementById("demo2").innerHTML = Date();
  }

  function myClick() {
     alert("hello world");
     document.getElementById("demo").innerHTML = "222222";
  }
}

如上所示，问题就可以解决，onload事件是在html页面加载完成后执行此事件，避免在head标签中引入js文件后，直接运行js文件而导致相应元素未找到问题；

faine℃

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
js中Uncaught TypeError: Cannot set property 'innerHTML' of null问题解决方法：

html文件如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="test.js"><...
复制链接

扫一扫