Jos*_*a W 69 javascript innerhtml onload
为什么我会收到错误或Uncaught TypeError:无法设置null的属性'innerHTML'？我以为我理解innerHTML并且之前有过工作.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>
Eri*_*ard 117
您必须在脚本之前放置hello div,以便在加载脚本时它存在.
Col*_*337 33
你需要告诉javascript执行动作"onload"...试试这个:
<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
RBT*_*RBT 30
我看到所有技术人员都提供了解决问题的解决方案,但是没有人能够理解为什么它首先发生的原因或根本原因.
为什么我会收到错误或Uncaught TypeError:无法设置null的属性'innerHTML'？
浏览器始终从上到下加载整个HTML DOM.在script标记内部(存在于headHTML文件的部分中)的任何JavaScript代码都会被浏览器呈现引擎执行,甚至在加载整个DOM(body标记中存在的各种HTML元素标记)之前.head标记中存在的脚本hello甚至在实际在DOM中呈现之前就试图访问具有id的元素.显然,JavaScript无法看到该元素,因此您最终会看到空引用错误.
你怎么能像以前一样工作？
当用户第一次登陆您的页面时,您希望在页面上显示"hi"消息.因此,当您完全确定DOM已完全加载且helloid元素可访问/可用时,您需要在某个时刻连接代码.它可以通过两种方式实现:
hello已经加载包含id元素的DOM之后才会触发脚本.您可以通过在所有DOM元素之后移动脚本标记来实现它,即在body标记结束的底部.由于渲染是从上到下进行的,因此您的脚本最终会被执行,并且您不会遇到任何错误. <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>window.onload事件,它为您提供浏览器已完成加载DOM的提示.因此,当此事件被触发时,您可以放心,hello已经在DOM中加载了id 的元素以及之后尝试访问此元素的任何JavaScript都不会失败.所以你做了类似下面的代码片段.请注意,在这种情况下,即使脚本位于head标记内HTML文档的顶部,您的脚本仍然有效.<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type ="text/javascript">
window.onload = function() {
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
}
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>JavaScript 部分需要在页面加载后运行，因此建议将 JavaScript 脚本放在 body 标签的末尾。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>把你的JS放进去吧 window.onload
window.onload = function() {
what();
function what() {
document.getElementById('hello').innerHTML = 'hi';
};
}
JavaScript看起来不错。尝试在div加载后运行它。尝试仅在文档准备就绪时运行。$(document).ready在jQuery中。
小智 5
这是我的片段尝试一下。我希望它对你有帮助。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>小智 5
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = '<p>hi</p>';
};
</script>
</body>
</html>| 归档时间： |
|
| 查看次数： |
262713 次 |
| 最近记录： |