TypeError when calling document.getElementById
Question
the following code should display the word Test...but instead the message TypeError: document.getElementById(...) is displayed. 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 answers
solution1
5 2017-07-04 18:55:45
You're trying to access the kaptree element before it's loaded. Run your script after loading the 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>
solution2
2 2017-07-04 18:56:35
您应该将脚本放在html元素之后。
solution3
2 2017-07-04 18:58:35
The element with the id "kaptree" is not available at this place. Move the script block below the body and it works.
Otherwise you have to wait for the document-ready state.
solution4
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>
solution5
1 2017-07-04 19:01:09
If you move the body section with the DIV setup to the top it works.
It runs sequentially so it can't assign the inner.html before the DIV is defined
solution6
1 2017-07-04 19:03:57
Because your JS code is called before HTML.
Solution 1: Add JS right before </body> tag
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
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>
solution7
0 2017-07-04 18:58:30
A. Put the script inside head or body.
B. Either put the script after #kaptree, or add a document ready statement. 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>
solution8
-1 2017-07-04 19:27:38
Sometimes the solution is so simple.
I will put the function call into a:
$( document ).ready(function() {
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.