Uncaught TypeError: Cannot set property ' ' of null 错误解决
来源:互联网 发布:淘宝店铺装修全屏海报 编辑:程序博客网 时间:2024/05/29 07:43
这是一个前端页面开发中常见的bug,自己也不是第一次遇到了。但是由于自己不是经常写前端代码,所以每次重新遇到都要再回忆一下是原因和解决方案,那就记下来以防下次再遇到吧。
bug重现
项目使用Ext组件,需求是在页面上展示一个图片,图片地址作为参数从上一页面传入。我的思路比较简单,就是新建一个pannel,里面写一个html的代码段,代码段大概长这样
"<img id='qrImage' src='com/system/empty.bmp' width='100%' height='100%'>"
图片的初始地址是一个临时图片,当获取到我们需要展现的图片地址时,就使用操作页面dom设置为新的地址,设置的地址长这样:
document.getElementById("qrImage").src = filePath;
看上去,没有任何的问题,但是页面加载的时候却报错了,错误就在上面这个语句,报错信息是:
Uncaught TypeError: Cannot set property 'src' of null
解决思路
不常写前端一下子就露怯了,我第一反应竟然是是不是获取ID的方法写的有问题,比如字母大小写拼错之类的问题,毕竟是个粗心大意的girl。然而现实是残酷的,W3C告诉我方法没有任何问题。
那么既然不是获取属性的方法没问题(其实就不可能是方法名字写错了,不然浏览器会报 is not a function),那肯定是这个dom本身写的有问题。最直观的办法当然就是debug了,bug也比较简单,跟进去就发现了问题。
原因
“document.getElementById(“qrImage”)”这里,代码没有获取到Id为“qrImage”的元素,那么就是null,null是没有办法set属性的,所以就会浏览器就会抛出这个错误:
Uncaught TypeError: Cannot set property 'src' of null
之后页面的渲染就会停止,页面报错。
解决办法
解决办法也很简单,就是确保在设置属性之前,qrImage这个元素已经被渲染完成,浏览器可以获取到这个元素,这样的话就不会报错。我的项目实际使用了Ext组件,并且使用了ExtBuilder来简化开发(说明这个是为了防止我的写法在其他情况下不适用),将代码替换为:
var infoPanel = Ext.getCmp("saveQR");infoPanel.html = "<img id='qrImage' src=\"" + url+ "\" width='100%' height='100%'>";
问题即可解决。
tips
对于没有使用Ext或者Ext开发组件的小伙伴,可以使用window.load或者afterrender方法来确保页面加载完再对页面进行操作即可。
- Uncaught TypeError: Cannot set property ' ' of null 错误解决
- javascript中,Uncaught TypeError: Cannot set property 'onchange' of null错误解决
- 【转】Uncaught TypeError: Cannot set property 'innerHTMl' of null
- Uncaught TypeError: Cannot set property 'innerHTML' of null
- Uncaught TypeError: Cannot set property 'innerHTML' of null
- Uncaught TypeError: Cannot set property 'onClick' of null。
- WebView Exception Uncaught TypeError: Cannot set property 'from' of null
- 表单提交Erro: formSubmit.html:** Uncaught TypeError: Cannot set property 'action' of null解决
- TypeError: Cannot read property 'style' of null 错误解决
- JS点击事件——Uncaught TypeError: Cannot set property 'onclick' of null
- 把script放在head里出现Uncaught TypeError: Cannot set property 'scrollTop' of null(…)
- 关于Uncaught TypeError: Cannot set property 'onClick' of null。的问题
- js遇到的Uncaught TypeError: Cannot set property 'onclick' of null at HTMLButtonElement.add.onclick错
- 泪的教训!"Uncaught TypeError: Cannot set property 'value' of null"
- canvas出现Uncaught TypeError: Cannot read property 'getContext' of null 错误
- 网页html错误:Uncaught TypeError: Cannot read property 'addEventListener' of null
- canvas中的Uncaught TypeError: Cannot read property 'getContext' of null 错误
- Uncaught TypeError: Cannot read property of 'name' null
- 文件的上传
- Leetcode 239. Sliding Window Maximum
- 母函数
- Struts2使用OGNI
- JAVA期终考试总结
- Uncaught TypeError: Cannot set property ' ' of null 错误解决
- nfs网络共享文件设置
- 虚拟机挂在共享文档
- VC++对话框学习总结
- BZOJ 1228: [SDOI2009]E&D 博弈,SG函数,组合游戏
- Algorithm Gossip (8) 八皇后问题
- 欢迎使用CSDN-markdown编辑器
- Thrift服务搭建和调用
- 我的笔记 MyEclipse快捷键