Uncaught TypeError: Cannot set property ‘innerHTML‘ of null

最新推荐文章于 2023-09-17 23:51:03 发布

阿珊和她的猫

最新推荐文章于 2023-09-17 23:51:03 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_42554191/article/details/110872773

版权

我的HTML代码

<span id="nickname"></span>
<div id="introduce"></div>

我的JS代码

 // JavaScript
    // 试图控制器
    var userInfo = {}
    Object.defineProperty(userInfo, 'nickName', {
      get: function(){
        return document.getElementById('nickname').innerHTML
      },
      set: function(nick){
        document.getElementById('nickName').innerHTML = nick
      }
    })
    Object.defineProperty(userInfo, 'introduce', {
      get: function(){
        return document.getElementById('introduce').innerHTML
      },
      set: function(introduce){
        document.getElementById('introduce').innerHTML = introduce
      }
    })

    userInfo.nickName = 'hls'
    userInfo.introduce = '我是哈哈哈，会不会，会不会，会不会'

起初我是这么写的，但是一直报错：

Uncaught TypeError: Cannot set property 'innerHTML' of null

于是就去查了很多资料：
在这里插入图片描述
我的天，网上居然一堆…

比较靠谱的是:

js中"Uncaught TypeError: Cannot set property ‘innerHTML’ of null"错误

这种情况时就会报错，这样写默认是从上往下读的在js代码部分那时候还没有p这个标签，因此无法获取该id

有两个解决办法
1.把script放到p标签的下面

2.使用window.onload
window.onload的作用是把js代码放到最后加载，因此就不用担心上述问题了

Cannot set property ‘innerHTML’ of null 问题的解决

错误

第一次写web 前端代码，出现了“Cannot set property ‘innerHTML’ of null”的错误代码，然后不知道原因在哪？

解决方案

在网上查了下资料，原来是js 代码从上往下执行时，没有找到合适的标签而出错。类似于在编程中使用一个未定义的变量，所以一定要在使用变量之前对其进行定义。

Uncaught TypeError: Cannot set property ‘innerHTML’ of null

引用1：

通过调试发现在js中的一段代码没有执行到，报以下错误

Uncaught TypeError: Cannot set property 'innerHTML' of null

然后查询该错误原因，结果是因为js引用放在了页面的头部，在修改 innerHTML 属性时找不到该属性，因为需要修改一个html标签中的内容，因此需要html加载并解析完成之后才能找到对应id的标签，在 head 处引用 js 导致 js 找不到对应 id ，当将 js 引用放在 body 尾部之后就可以正常显示了。

引用2：

当出现以下错误："……is not defined”、"Uncaught TypeError: Cannot set property ‘innerHTML’ of null”、“document.getElementById(“Clock”) is null” 时请注意！

很有可能是js文件中调用了html中的对象，并且js在这个调用的对象之前加载了。

所以呢，只要把js文件引用或代码放到最后或调用的对象后面就行了。

补充：正确的写法应该是在请用对象之前作个判断。 if(document.getElementById("dd")){....}

我觉得我都试过了，但是我还是没有成功。。。

后来我调试了一下，是id名字有问题。。。

在这里插入图片描述
nickname才能正确找到，nickName是null…

最后经过一番瞎折腾，我的源码最终如下：

<!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>
  <div>
    尊敬的：<span id="nickname"></span><br /><br />
    <div id="introduce"></div>
  </div>
  <script type ="text/javascript">
    // JavaScript
   // 试图控制器
   console.log(document.getElementById("nickname"))
   console.log(document.getElementById("nickName"))
   window.onload = function() {
    if(document.getElementById("nickname") && document.getElementById("introduce")){
      var userInfo = {}
    Object.defineProperty(userInfo, 'nickname', {
      get: function(){
        return document.getElementById('nickname').innerHTML
      },
      set: function(nickName){
        document.getElementById('nickname').innerHTML = nickName
      }
    })
    Object.defineProperty(userInfo, 'introduce', {
      get: function(){
        return document.getElementById('introduce').innerHTML
      },
      set: function(introduce){
        document.getElementById('introduce').innerHTML = introduce
      }
    })
    
    userInfo.nickname = 'hls'
    userInfo.introduce = '一个用户的所有请求操作都应该属于同一个会话'
    }
   }
  
  </script>
  <!-- <script src="./userInfo.js"></script> -->
</body>
</html>

显示效果：
在这里插入图片描述

阿珊和她的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Uncaught TypeError: Cannot set property ‘innerHTML‘ of null

我的HTML代码<span id="nickname"></span><div id="introduce"></div>我的JS代码 // JavaScript // 试图控制器 var userInfo = {} Object.defineProperty(userInfo, 'nickName', { get: function(){ return document.getElementByI
复制链接

扫一扫