[英]TypeError when calling document.getElementById
以下代码应显示单词Test ...，但显示消息TypeError：document.getElementById（...）。 我不知道为什么：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<script>
document.getElementById("kaptree").innerHTML="TEST";
</script>
<body>
<div id="kaptree"></div>
</body>
</html>
谁能帮助我睁开眼睛？
您正在尝试在加载kaptree元素之前对其进行访问。 加载DOM 后运行脚本。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Testtree</title> </head> <body> <div id="kaptree"></div> <script> document.getElementById("kaptree").innerHTML = "TEST"; </script> </body> </html>
您应该将脚本放在html元素之后。
标识为“ kaptree”的元素在此位置不可用。 将脚本块移动到身体下方，即可正常工作。
否则，您必须等待文档就绪状态。
您的脚本是在您尝试引用的元素之前定义的。
在以下位置移动它：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
</body>
<script>
document.getElementById("kaptree").innerHTML="TEST";
</script>
</html>
或更可读易维护的解决方案，请使用函数：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
function changeValue(){
document.getElementById('kaptree').innerHTML='TEST';
}
</script>
</head>
<body>
<div id="kaptree"></div>
<script>changeValue()</script>
</body>
</html>
如果将带有DIV设置的主体部分移到顶部，它将起作用。
它按顺序运行，因此在定义DIV之前无法分配inner.html
因为您的JS代码在HTML之前被调用。
解决方案1：在</body>标记之前添加JS
例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Testtree</title> </head> <body> <div id="kaptree"></div> </body> <script> document.getElementById("kaptree").innerHTML+="TEST"; </script> </html>
解决方案2：在window.load函数中执行JS代码
例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Testtree</title> <script> window.onload = (function(){ document.getElementById("kaptree").innerHTML+="TEST"; }); </script> </head> <body> <div id="kaptree"></div> </body> </html>
A.将脚本放入头部或身体。
B.将脚本放在#kaptree之后，或添加文档就绪语句。 您尝试呼叫尚不存在的内容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("kaptree").innerHTML="TEST";
}, false);
</script>
</head>
<body>
<div id="kaptree"></div>
</body>
</html>
有时解决方案是如此简单。
我将函数调用放入：
$( document ).ready(function() {
});
TypeError：document.getElementById（...）[0]未定义
[英]TypeError: document.getElementById(…)[0] is undefined
传递PHP变量时，JavaScript抛出TypeError，document.getElementById
[英]Javascript throwing TypeError, document.getElementById when passed PHP variable
TypeError：document.getElementById（…）; 为空JavaScript
[英]TypeError: document.getElementById(…); is null javascript
TypeError：document.getElementById（…）为null Django + JS
[英]TypeError: document.getElementById(…) is null Django + JS
TypeError：document.getElementById（…）.getElementsByTagName（…）.click不是函数
[英]TypeError: document.getElementById(…).getElementsByTagName(…).click is not a function
Selenium IDE-TypeError：document.getElementById（..）为空
[英]Selenium IDE - TypeError: document.getElementById(..) is null
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.