Unable to find element from script
I’m trying to get a DOM element from JavaScript. Even though the ID is correct, getElementId can’t seem to find it; I get a
TypeError: Cannot read 开发者_Python百科property 'innerHTML' of null
in Chrome, or a
TypeError: x is null
in Firefox using only the simple code below. Why is this?
<!DOCTYPE html>
<html>
<head>
<script>
var x = document.getElementById("myHeader");
alert(x.innerHTML);
</script>
</head>
<body>
<h1 id="myHeader">Click me!</h1>
</body>
</html>
Since the <script> tag is inside the <head> tag, it runs before the body is parsed, so the myHeader element doesn’t exist yet.
You need to put the <script> block at the end of the <body> tag.
Or leave it in the <head> but wrap it in a function and call it when <body> is loaded
<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function init(){
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
//-->
</script>
</head>
<body onload="init();">
<h1 id="myHeader">Click me!</h1>
</body>
</html>
The problem is that at the moment you call the getElementById function the DOM hasn't finished loading yet, so no element myHeader exists. You need to execute this code when the DOM has finished loading. For example:
window.onload = function() {
var x = document.getElementById("myHeader");
alert(x.innerHTML);
};
If you use the popular jQuery framework, your code might look like this:
$(function() {
var x = $("#myHeader");
alert(x.html());
});
and it will work with most browsers.
Another option is to put your script just before closing the body tag:
<h1 id="myHeader">Click me!</h1>
<script type="text/javascript">
<!--
var x=document.getElementById("myHeader");
alert(x.innerHTML);
//-->
</script>
</body>
As the DOM is loaded sequentially once your script starts executing the myHeader element will already be loaded.
Move your script to the bottom in this case, like this:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<h1 id="myHeader">Click me!</h1>
<script type="text/javascript">
<!--
var x=document.getElementById("myHeader");
alert(x.innerHTML);
//-->
</script>
</body>
</html>
Currently, it's executing before the element exists, so it's erroring because it's not finding anything, and x is undefined. Running your script at the end of the body will resolve this.
Your script is running before your HTML is loaded. Move the script to the bottom or delay execution until the page has loaded.
Also, you never need to use <!-- ... ----> to hide your script. There's nothing to hide it from
how do you think the browser would know to call your code after clicking the header? you'd need to extract the alert(something) into a function, e.g.
function hello(){
alert("hello world");
}
and to the h1 element add onClick="hello()" attribute.
This won't work because the browser executes your script immediately upon seeing it, which is before your h1 tag is parsed and added to the DOM.
You could put the <script> tag at the end of yoru document, but a better way is to defer execution by putting your alert in the window's onload handler.
If you're interested in using a framework like jQuery, it provides a similar ready event.
加载中,请稍侯......
精彩评论