【转】Uncaught TypeError: Cannot set property ' ' of null 错误解决

这是一个前端页面开发中常见的bug，自己也不是第一次遇到了。但是由于自己不是经常写前端代码，所以每次重新遇到都要再回忆一下是原因和解决方案，那就记下来以防下次再遇到吧。

bug重现
项目使用Ext组件，需求是在页面上展示一个图片，图片地址作为参数从上一页面传入。我的思路比较简单，就是新建一个pannel，里面写一个html的代码段，代码段大概长这样

"<img id='qrImage' src='com/system/empty.bmp' width='100%' height='100%'>"
1
图片的初始地址是一个临时图片，当获取到我们需要展现的图片地址时，就使用操作页面dom设置为新的地址，设置的地址长这样：

document.getElementById("qrImage").src = filePath;
1
看上去，没有任何的问题，但是页面加载的时候却报错了，错误就在上面这个语句，报错信息是：

Uncaught TypeError: Cannot set property 'src' of null
1
解决思路
不常写前端一下子就露怯了，我第一反应竟然是是不是获取ID的方法写的有问题，比如字母大小写拼错之类的问题。然而现实是残酷的，W3C告诉我方法没有任何问题。
那么既然不是获取属性的方法没问题（其实就不可能是方法名字写错了，不然浏览器会报 is not a function），那肯定是这个dom本身写的有问题。最直观的办法当然就是debug了，bug也比较简单，跟进去就发现了问题。

原因
“document.getElementById(“qrImage”)”这里，代码没有获取到Id为“qrImage”的元素，那么就是null，null是没有办法set属性的，所以就会浏览器就会抛出这个错误：

Uncaught TypeError: Cannot set property 'src' of null
1
之后页面的渲染就会停止，页面报错。

解决办法
解决办法也很简单，就是确保在设置属性之前，qrImage这个元素已经被渲染完成，浏览器可以获取到这个元素，这样的话就不会报错。我的项目实际使用了Ext组件，并且使用了ExtBuilder来简化开发（说明这个是为了防止我的写法在其他情况下不适用），将代码替换为：

var infoPanel = Ext.getCmp("saveQR");
infoPanel.html = "<img id='qrImage' src=\"" + url+ "\" width='100%' height='100%'>";
1
2
问题即可解决。

tips
对于没有使用Ext或者Ext开发组件的小伙伴，可以使用window.load或者afterrender方法来确保页面加载完再对页面进行操作即可。

转载于:https://www.cnblogs.com/taofengfeng/p/10874718.html

【转】Uncaught TypeError: Cannot set property ' ' of null 错误解决相关推荐

chrome浏览器不能录音：Uncaught TypeError: Cannot read property ‘getUserMedia‘ of undefined解决方法
Uncaught TypeError: Cannot read property 'getUserMedia' of undefined解决方法 javascript 打不开浏览器录音功能的问题解决方 ...
jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' of undefined
Jquery DataTable使用报这个错: jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' o ...
【StackFlow】Uncaught TypeError: Cannot read property 'pageCount' of undefined
Exception 使用Ext JS 4 分页查询时,当查询结果为0时报错: Uncaught TypeError: Cannot read property 'pageCount' of undef ...
Uncaught TypeError: Cannot read property 'setAttribute' of null
Uncaught TypeError: Cannot read property 'setAttribute' of null 其实就是js中空指针异常 h5splayer.js:1 Uncaught ...
Uncaught TypeError: Cannot read property 'value'' of null
在用JS实现ajax做网页聊天室的时候,报了一个错误: Uncaught TypeError: Cannot read property 'value'' of null at chat (Gluti ...
Uncaught TypeError: Cannot read property 'length' of null错误怎么处理？
Uncaught TypeError: Cannot read property 'length' of null 错误怎么处理? 1.可能是返回的datagrid数据格式有问题,比如{"t ...
(原创)JS点击事件——Uncaught TypeError: Cannot set property 'onclick' of null
html部分代码: JS部分代码: 需要实现的效果:点击图片,来回相互切换. 我开始的错误做法:代码如上图所示(逻辑上看起来是没有错误的) 尝试过程:把JS代码放在</body>闭合标签之 ...
JS Uncaught TypeError: Cannot read property ‘indexOf‘ of null问题解决
问题描述: Uncaught TypeError: Cannot read property 'indexOf' of null 问题分析: 使用indexOf()的变量为null. 问题解决: 1. ...
对于Uncaught TypeError: Cannot set property ‘innerHTML‘ of null 的理解
在w3school自学JavaScript时,发现一个很有意思的问题.首先看下面代码: <!DOCTYPE html> <html> <body><h2> ...

【转】Uncaught TypeError: Cannot set property ' ' of null 错误解决

【转】Uncaught TypeError: Cannot set property ' ' of null 错误解决相关推荐

最新文章

热门文章