JavaScript加载顺序报错

来源：互联网发布：大连理工大学网络期刊编辑：程序博客网时间：2024/06/05 08:10

JavaScript如果放在HTML主体之前，由于被操作的元素未被加载报错：
1.script中忽略函数的影响，仅对标签及元素的获取和操作：报错；
注：获取得到null，不报错，操作则在console日志报错。

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title> </head> <body> <style type="text/css">       .c1{color:red } </style><script><!--  var element=document.getElementById("demo");    console.log("元素"+element);  element.style.background="yellow";</script><p id="demo">  <font size="4">报错 </font></p><button type="button" onclick="myFunction()">变色</button></body></html>

如图：
这里写图片描述

2.script中仅有函数，排除其他因素影响：
a)当函数在行间事件触发调用时：函数正常运行且改变样式；

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title> </head> <body> <style type="text/css">       .c1{color:red } </style><script><!--  function myFunction(){        var element=document.getElementById("demo");    console.log("函数中获得元素值："+element);    element.className="c1";   }  //-->   </script><p id="demo">  <font size="4">正常运行</font></p><button type="button" onclick=" myFunction()">变色</button></body></html>

这里写图片描述

b)函数在script全局中调用时：报错；
【注意不要自调，形成死循环】
点击按钮后函数可正常调用且改变样式。

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title> </head> <body> <style type="text/css">       .c1{color:red } </style><script>  function myFunction(){    var element=document.getElementById("demo");    console.log("函数中获得元素值："+element);    element.className="c1";       }  myFunction();</script><p id="demo">  <font size="4">在script中猴急调用报错/点击按钮后函数则正常运行</font></p><button type="button" onclick="myFunction()">变色</button></body></html>

这里写图片描述

小结：script代码在主体之前，如果函数是行间事件调用则不影响；如果在script全局中或者函数中开始操作标签或元素样式则报错。
解决方案：
①让HTML加载后再加载script；
window.onload(){
}
②script代码写在HTML代码的底部。

0 0