调用document.getElementById时发生TypeError
[英]TypeError when calling document.getElementById
问题描述
the following code should display the word Test...but instead the message TypeError: document.getElementById(...) is displayed. 
以下代码应显示单词Test ...，但显示消息TypeError：document.getElementById（...）。 I can't figure out why: 我不知道为什么：
<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>
Can anyone help me to open my eyes? 谁能帮助我睁开眼睛？
8 个解决方案
解决方案1
5 2017-07-04 18:55:45
You're trying to access the kaptree element before it's loaded. 您正在尝试在加载kaptree元素之前对其进行访问。 Run your script after loading the DOM. 加载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>
解决方案2
2 2017-07-04 18:56:35
您应该将脚本放在html元素之后。
解决方案3
2 2017-07-04 18:58:35
The element with the id "kaptree" is not available at this place. 标识为“ kaptree”的元素在此位置不可用。 Move the script block below the body and it works. 将脚本块移动到身体下方，即可正常工作。
Otherwise you have to wait for the document-ready state. 否则，您必须等待文档就绪状态。
解决方案4
1 2017-07-04 18:55:54
Your script is defined before the element that you try to reference. 您的脚本是在您尝试引用的元素之前定义的。
Move it after : 在以下位置移动它：
<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>
Or more readable and maintainable solution, use a function : 或更可读易维护的解决方案，请使用函数：
<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>
解决方案5
1 2017-07-04 19:01:09
If you move the body section with the DIV setup to the top it works. 如果将带有DIV设置的主体部分移到顶部，它将起作用。
It runs sequentially so it can't assign the inner.html before the DIV is defined 它按顺序运行，因此在定义DIV之前无法分配inner.html
解决方案6
1 2017-07-04 19:03:57
Because your JS code is called before HTML. 因为您的JS代码在HTML之前被调用。
Solution 1: Add JS right before </body> tag 解决方案1：在</body>标记之前添加JS
Example: 例：
<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>
Solution 2: Execute JS code inside window.load function 解决方案2：在window.load函数中执行JS代码
Example: 例：
<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>
解决方案7
0 2017-07-04 18:58:30
A. Put the script inside head or body. A.将脚本放入头部或身体。
B. Either put the script after #kaptree, or add a document ready statement. B.将脚本放在#kaptree之后，或添加文档就绪语句。 You try to call something that isn't there yet. 您尝试呼叫尚不存在的内容。
<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>
解决方案8
-1 2017-07-04 19:27:38
Sometimes the solution is so simple. 有时解决方案是如此简单。
I will put the function call into a: 我将函数调用放入：
$( document ).ready(function() {
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.