script标签在html中的放置位置引起的错误
1.首先把script放在前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
<script>
//带参数的函数
function myFunction(a,b){
document.getElementById("mydiv").innerHTML= a+b;
}
// 带返回值的函数
function myFunctionWithReturn(a,b){
return a*b;
}
document.getElementById("mydiv").innerHTML= myFunctionWithReturn(12,33);
</script>
</head>
<body>
<div id="mydiv" style="width: 500px;height: 550px;background-color: mediumaquamarine;">
</div>
<button onclick="myFunction(12,32)">点击</button>
</body>
</html>
结果：
控制台报错：Uncaught TypeError: Cannot set property ‘innerHTML’ of null at 函数.html:16
2.然后把没有生效的部分代码放在后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
<script>
//带参数的函数
function myFunction(a,b){
document.getElementById("mydiv").innerHTML= a+b;
}
// 带返回值的函数
function myFunctionWithReturn(a,b){
return a*b;
}
// document.getElementById("mydiv").innerHTML= myFunctionWithReturn(12,33);
</script>
</head>
<body>
<div id="mydiv" style="width: 500px;height: 550px;background-color: mediumaquamarine;">
</div>
<button onclick="myFunction(12,32)">点击</button>
<script>
document.getElementById("mydiv").innerHTML= myFunctionWithReturn(12,33);
</script>
</body>
</html>
结果就生效了
3.原因分析
浏览器解析HTML，是从前往后逐步加载的，当发现script标签时，会先下载完所有这些script，再往下解析其他的HTML，放在前面加载时，mydiv还没有加载完成，所以此时无法找到id为mydiv的元素，自然也就达不到相应的效果，放在后面时，mydiv加载已经完成，自然就可以找到该元素并实现相应的效果。
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
