报错：Uncaught TypeError: Cannot set property ‘innerHTML‘ of null

JS常见错误解析
最新推荐文章于 2023-02-22 08:32:35 发布
原创 最新推荐文章于 2023-02-22 08:32:35 发布 · 1.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文解析了JavaScript中常见的TypeError: Cannot set property 'innerHTML' of null错误，详细介绍了两种常见原因及解决办法，帮助开发者理解错误产生的背景并提供有效的解决方案。

报错：Uncaught TypeError: Cannot set property ‘innerHTML’ of null

出现这个错误的原因我知道2个：
假设以下代码报这个错误

document.getElementById("name").innerHTML = "zhangsan";
  1. HTML元素不存在。页面不存在id为name的HTML元素。解决办法：删除掉这个多余的代码。
  2. js代码先加载，HTML标签后加载，这时，在加载js时，找不到id为name的HTML标签。解决方法，把这个js代码放到</body>后，让HTML标签先加载。
Uncaught TypeError Cannot set properties of undefined (setting ‘innerHTML‘)的错误
m0_52789121的博客
03-03 1332
错误出现的前提: 页面中的Table每一行有一个删除按钮,当删除此行数据之后,需要对序号的值进行动态的更新(在另一篇文章中)。 当执行了删除操作 -> 再次添加新的数据 ->执行删除操作的时候就会出现标题中的错误。 解决方向: 思路一:加载时 由于页面加载顺序为:结构>样式>行为(html>css>JavaScript)。 如果js部分写到了页面内容的前面，那么在加载的时候，浏览器的加载顺序（错误顺序）是js>html，所以就有可能报标题中的错误。 解决办法一: 将
使用CkEditor 报错Uncaught TypeError: Cannot read property 'getSelection' of undefined
qq_35111781的博客
04-14 3359
使用CkEditor 报错Uncaught TypeError: Cannot read property 'getSelection' of undefined。 先说说我的需求，SpringBoot集成CKEditor，在一个页面需要加载多个CKEditor富文本框，使用富文本框填写上下角标。 最开始已经碰到好几个问题（见上篇：SpringBoot集成ckeditor超详解）， 本地运行...
Uncaught TypeError: Cannot set property 'innerHTML' of null
weixin_30817749的博客
04-03 168
学习Chrome插件时，要在弹出页面中显示当前时间，结果怎样也显示不出来 看了http://www.cnblogs.com/mfryf/p/3701801.html这篇文章后感悟颇深 通过调试发现在js中的一段代码没有执行到，报以下错误 　　Uncaught TypeError: Cannot set property 'innerHTML' of null 　　然后查询该错误原因，...
对于Uncaught TypeError: Cannot set property ‘innerHTML‘ of null 的理解
Dr_free的博客 专注物联网的数据处理和组网技术
09-09 2027
在w3school自学JavaScript时，发现一个很有意思的问题。首先看下面代码： <!DOCTYPE html> <html> <body> <h2>Body中的JavaScript</h2> <script> myFunction(); function myFunction() { document.getElementById("demo").innerHTML ="hello"; } </script
Uncaught TypeError: Cannot set property 'innerHTML' of null的解决方案
热门推荐
a1106103430的博客
09-30 2万+
** HTML错误：Uncaught TypeError: Cannot set property ‘innerHTML’ of null** 原因：找不到目标，这与代码的读取顺序有关例如： 编译器先执行了js代码段但没有找到目标id于是浏览器报错： 只需要把js代码嵌入到目标语句的后方即可，编译器找到了目标id之后执行就没问题啦！ ...
uncaught typeerror: cannot set property 'innerhtml' of null
06-28
这是一个JavaScript错误，意思是无法设置null的innerhtml属性。这通常是因为你尝试在一个不存在的元素上设置innerhtml属性。你需要检查你的代码，确保你正在尝试设置正确的元素的innerhtml属性。
Uncaught TypeError: Cannot set properties of null (setting
03-28
This error message indicates that you are trying to set the innerHTML property of a null value, which is not possible. This usually happens when you are trying to access an element in the DOM that ...
Map.vue:175 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'name')
08-31
- *1* *3* [JS常见报错解决办法:Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)](https://blog.youkuaiyun.com/wodege优快云/article/details/130457191)[target="_blank" data-report-click={...
（转）Uncaught TypeError: Cannot set property 'innerHTML' of null
Jasper1207的博客
09-11 386
（转）http://www.cnblogs.com/Ricky-Huang/p/5536253.html 在使用Ueditor的时候，会爆出这样的错误： 浏览器控制台就报错了Cannot set property 'innerHTML' of null .意思就是需要赋值的对象是null(但为什么没有报undefined呢?答案接下来分析) 而且奇葩的是,editor编辑器内...
Uncaught TypeError：Cannot set property ”innerHTML“ of null 常是粗心错误
qq_2605729906的博客
06-09 912
Uncaught TypeError: Cannot set property ‘innerHTML’ of null 捕获不到类型错误:无法将属性’innerHTML’设置为null <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="
Uncaught TypeError: Cannot set property ‘innerHTML‘ of null
你若盛开，清风自来
12-08 1251
我的HTML代码 <span id="nickname"></span> <div id="introduce"></div> 我的JS代码 // JavaScript // 试图控制器 var userInfo = {} Object.defineProperty(userInfo, 'nickName', { get: function(){ return document.getElementByI
js中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
qq_44983621的博客
08-20 1万+
js中"Uncaught TypeError: Cannot set property ‘innerHTML’ of null"错误 这是属于一个常见的错误 <script type="text/javascript"> document.getElementById("timer").innerHTML = "adasd"; </script> <body&g...
Cannot set property innerHTML of null
qq_27523379的博客
06-21 3709
最近写代码出现一个这样的一个: Uncaught TypeError: Cannot set property ‘innerHTML’ of null. 大致意思就是无法为innerHTML设置为null,也就是无法将标签的html内容设置为null,这种情况一般是没有调用JavaScript函数并且JavaScript在HTML标签的前面,造成Javascript找不到对应的HTML标签,看代码 <!DOCTYPE HTML > <HTML> <head> &l
js中Uncaught TypeError: Cannot set property 'innerHTML' of null问题解决方法：
每日一算
08-12 1万+
html文件如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="test.js"><...
Cannot set property ‘innerHTML’ of null 错误原因
u010233323的博客
08-02 1万+
很有可能是js文件中调用了html中的某个节点，并且js在这个调用的对象之前加载了。 如果js放在头部时，此时浏览器渲染未进入dom节点，因为提示为空，或者找不到。 所以把js代码放到最后或调用的对象后面就行了。     补充：正确的写法应该是在请用对象之前作个判断。 if(document.getElementById(“id”)){ dosomething }
Uncaught TypeError: Cannot set property 'innerText' of null
qq_44070529的博客
12-30 2218
<head> <meta charset="utf-8"/> <title></title> <link rel="stylesheet" href="mytable.css" /> <script type="text/javascript"> var list = [ {id:1,name:'zhan'...
:8 Uncaught TypeError: Cannot read property ‘innerHTML‘ of null
02-22 558
There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated should leave quickly.
报错：js: Uncaught TypeError: Cannot read property 'checkRegistry' of undefined
最新发布
07-03
在 Vue3 项目中使用 QWebChannel 调用 C++ 方法时，出现 `Uncaught TypeError: Cannot read property 'checkRegistry' of undefined` 错误通常表明 QWebChannel 实例未能正确初始化或注册。这种错误可能源于以下几种情况： 1. **QWebChannel 未正确初始化** 在 Vue3 的环境中，需要确保 QWebChannel 对象在页面加载后被正确创建，并且与 Qt WebEngine 或相关后端建立连接。如果 QWebChannel 实例未成功初始化，则调用其方法（如 `checkRegistry`）会导致该错误。 2. **跨域问题或异步加载延迟** 如果 QWebChannel 是通过远程资源加载的，可能会受到浏览器同源策略限制，或者由于异步加载尚未完成就尝试访问其属性而导致对象为 `undefined` [^3]。 3. **C++ 后端未正确暴露接口** 在 Qt 中，需要使用 `QWebChannelAbstractTransport` 和 `QWebChannel` 将 C++ 对象注册到前端 JavaScript 环境中。如果未正确设置传输通道或未将对象注册到 QWebChannel，则前端无法访问这些方法 [^5]。 4. **Vue3 生命周期钩子中过早访问 QWebChannel** 若在 `onMounted` 钩子之前或异步数据加载完成前尝试访问 `checkRegistry` 属性，也可能导致此错误。建议将所有对 QWebChannel 的操作放在 `onMounted` 生命周期钩子中执行 [^4]。 ### 解决方案 #### 检查 QWebChannel 初始化 确保在 Vue 组件的 `onMounted` 生命周期钩子中正确初始化 QWebChannel，并等待其连接建立后再进行调用： ```javascript import { onMounted } from 'vue'; onMounted(() => { const webChannel = new QWebChannel(qt.webChannelTransport, (channel) => { // 获取 C++ 对象 const cppObject = channel.objects.myCppObject; if (cppObject && typeof cppObject.checkRegistry === 'function') { cppObject.checkRegistry((result) => { console.log('Registry check result:', result); }); } else { console.error('checkRegistry method is not available'); } }); }); ``` #### 确保 C++ 对象已正确注册 在 Qt 端，确认你已正确地将 C++ 对象注册到 QWebChannel 并设置了传输机制： ```cpp // C++ 示例代码 QWebChannel *channel = new QWebChannel(webView->page()); MyCppObject *myObj = new MyCppObject(); channel->registerObject("myCppObject", myObj); webView->page()->setWebChannel(channel); ``` #### 异步处理和容错机制 引入异步检查机制以避免因 QWebChannel 尚未准备好而引发错误： ```javascript let retryCount = 0; const maxRetries = 5; function tryAccessCheckRegistry() { if (window.qwebChannel && window.qwebChannel.objects && window.qwebChannel.objects.myCppObject) { window.qwebChannel.objects.myCppObject.checkRegistry((result) => { console.log('Registry check result:', result); }); } else if (retryCount < maxRetries) { setTimeout(() => { retryCount++; tryAccessCheckRegistry(); }, 1000); // 每秒重试一次 } else { console.error('Failed to access checkRegistry after multiple attempts.'); } } onMounted(() => { tryAccessCheckRegistry(); }); ``` #### 调试与日志输出 添加调试信息可以帮助定位问题根源： ```javascript onMounted(() => { if (typeof QWebChannel === 'undefined') { console.error('QWebChannel is not defined. Check your Qt integration.'); } else { console.log('QWebChannel is available.'); } }); ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值