发表于: 2017-05-30 23:40:48
1 974
今天完成的事情:
最近真是bug不断昨天刚解决了编辑器里的内容的提交问题,今天又发现图片预览功能无法实现了。
检查了一下代码感觉没什么问题,打开历史记录对比也没找到有什么特别需要注意的内容,
而且图片虽然无法预览,但上传还是正常实现了的。图片预览功能依然是用的FileReader,绑定在
input框的onchange事件上,但浏览器就是不给面子,不给显示预览图片。
明天计划的事情:
完成任务10,不能再被bug耽误进程了。
遇到的问题:
浏览器一直报错Uncaught TypeError: Cannot set property onchange of null,我看了是百思不得其解,
好好的onchange怎么就set不了呢。上网搜了一下,有人说遇到这种情况需要把js代码放在html页面中
用script标签包起来,我试了下,确实好使,放在html文件里立马就不报错了,但是图片预览功能还是
实现不了。。。
后来又在stackoverflow上找到一个类似的问题,排在第一的答案是这么解释的:
There's only one possible reason for that error message, document.getElementById("drop") does not return the element, and the only reason for that is that the element doesn't exists, but in the HTML it clearly does, so the script must be running before the elements in the DOM.
You have to include the javascript after the elements in the DOM, or wrap it in a DOM ready handler, like window.onload etc.
大概翻译一下就是:出现这条抱错信息,只可能有一个原因,那就是document.getElementById("drop")没有获取到元素节点,而这个问题唯一的原因就是id为drop的元素不存在,但是在html里它确实存在,所以js代码肯定是在DOM之前运行了。
你必须把代码放在dom之后运行,比如放在widow.onload里。
看完这个答案真是醍醐灌顶。后面还有人好心的建议用$(document).ready(function(){ })包起来。
我试了一下,果然有效,非常开心。
但是,好景不长,吃完晚饭回来我发现,预览功能又失效了,打开控制器,那条报错信息又阴魂不散的出现在
面前。这就很尴尬了,我问了一下雪峰,他的这个预览功能的代码是放在哪里的,他说放在了选择文件按钮的
ng-click函数里,我一想,对啊,这样代码无论如何也不会先于DOM执行了。然后动手把代码一转移,报错消失,功能实现。
收获:
收获了与bug作斗争的经验,了解了Cannot set property onchange of null这条信息出现的实际原因。
遇到了stackoverflow这个给力的网站,虽然问题和答案都是英文,但是内容都很有料。
小课堂是开放讲的line-height和vertical-align,复习了一下CSS的基线,底线等,对vertical-align的各种属性一一实验,了解分别的效果是什么。顺带回顾了实现垂直居中的问题。
评论