属性“×”的值为 null、未定义或不是 Function 对象的错误分析

为什么有时候我们的写的js方法是存在的,并且是正确无误的,浏览器F12控制台依然会有错误:

属性“×”的值为 null、未定义或不是 Function 对象?

如果开发经验丰富的话,那么这个问题,不难解决,否则给人的感觉是非常崩溃的!

如果要彻底的分析这个错误的产生原因,那么顺便说下html的加载顺序了

毋庸置疑,顺序当然是从上到下进行加载,依次为head元素->body元素;如果是jsp,则直接发给服务器。

一:

1.head元素中所引用得外部文件代码,一开始就下载。

2.遇到script时浏览器暂停解析(非暂停下载),将控制权交给JavaScript引擎(解释器),若<script>元素有引用外部脚本,就下载该脚本,否则直接执行,执行完毕后交给浏览器渲染引擎

二:

1.浏览器解析body中的代码时会按照head中声明一部分样式去解析(若head中引用的外部文件没有下载完,将会继续下载)

2.如果遇到body中有<script>元素,同样会将控制权交给JavaScript引擎来解释执行

3.当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后,css会重新渲染整个页面的html元素。

注意:<script>写到body标签内靠后比较好,

原因:JavaScript 会操作html元素, 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素的错误,

通常js会被写在<head>元素的<script>元素中,body中写js代码的情况较少,通常只有

window.onload: 等待页面中的所有内容加载完毕之后才会执行(包括图片、音乐等大文件)

$(document).ready(): 页面中所有DOM树绘制完毕之后就马上执行

回到文章主题:

浏览器解释执行<script>元素中的代码时若遇到语法错误,那么这一整个<script>元素中的代码也都将会解释失败!(包括里面所有的js方法/函数)

以下是我遇到的情形:查询按钮绑定的方法没有错误,不要问我为啥确定没有错误,因为我压根就没改过。。

Tips:

1.遇到这种错误时最好通过Ctrl+F5强制刷新(好处在于浏览器不会使用缓存,直接当新的DOM文档来解释执行!),此时错误信息会原形毕露:

进入该错误:

源文件:

最后在java代码块<%=submitFlag%>外加了双引号“”才得以解决!

有个异常要抛出来:submitFlag也是字符串类型,为什么会不识别呢?

猜你喜欢

转载自blog.csdn.net/qq_33666602/article/details/79855693