关于JS调试控制台报错：Uncaught TypeError：Cannot set properties of null ( setting ‘innerHTML’ )解决方法
发布于2022-03-18 20:14 阅读(6139) 评论(0) 点赞(7) 收藏(1)
报错现象如上图：
Cannot set properties of null ( setting ‘innerHTML’ ) 的意思：无法设置未定义或null引用的属性innerhtml。
分析：
一，innerHTML前面的对象是null或未定义。
el.innerHTML = 'test'; 这里el可能是空。找不到要插入HTML代码的地方。所以先确保已经成功获取了要插入的元素对象（检查下对象名字有没有写错，前后不对应等情况）。如下result先确保获取成功：
- var result = document.getElementById("id name") ;
- result.innerHTML = "<P>123</P>";
二，了解浏览器工作原理：由于浏览器解析HTML代码时候，是自上而下来执行的。
有可能是解析了js代码的时候，还没解析到body里面的代码，因此找不到对应的操作对象。此时，两个解决方法：1，重新排序脚本。把js代码放在body内容的后面，即</body>标签的前面。如下：
- <body>
- HTML代码。。
- <script>js代码</script>
- </body>
2，js代码用 window.onload事件，来进行事件挂钩，意思是等页面加载后再执行这段代码。如下：
- <script>
- window.onload = function(){
- js代码
- }
- </script>
原理详细解说参考：javascript - Cannot set property 'innerHTML' of null - Stack Overflow
小结：
1，先确保已经成功获取了操作对象。
2，根据自上而下解析原理，重新排序脚本或者加window.onload事件。
3，后面发现更多方法再更新。
原文链接:https://blog.csdn.net/weixin_45768342/article/details/123006011
所属网站分类: 技术文章 > 博客
作者：程序员的人生
链接：http://www.qianduanheidong.com/blog/article/317897/8187881ffa79d283068b/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力