Why JS Error IN IE6 (not var variables)
I coded the following JS
<html>
<body>
<img id="img" src="http://example.com/img.jpg" />
<script type="text/javascript">
//<![CDATA[
(function(){
img = document.getElementById("img");
img.src = "http://example.com/img.png";
})();
//]]>
</script>
</body>
but on IE6 some js errors are occured.
Because Should I use var img? incidentally
<body>
<img id="img" src="http://example.com/img.jpg" />
<script type="text/javascript">
//<![CDATA[
(function(){
var img = document.getElementById("img");
img.src = "http://example.com/img.png";
})();
//]]>
</script>
</body>
</html>
is 开发者_StackOverflow中文版no problem I can't get the reason why Could you explain me?
If you omit var when you're declaring a variable, and that variable doesn't exist in current local scope, one of two things will happen:
- you'll declare a new "global" variable, to which every function will have access to -> don't do this
- you'll set an already existing global variable to a new value; if some other function relies on this variable, you could wreak havoc
So, don't use global variables and use var whenever possible. As Tomas already pointed out, your script could be run before the structure is loaded by the browser.
The script is running before the whole body structure is loaded by the browser. So, your function can't find the img element.
Invoking your function at the onLoad body event would fix the error.
I.e:
<html>
<head>
<script type="text/javascript">
//<![CDATA[
function loadImage(){
img = document.getElementById("img");
img.src = "http://example.com/img.png";
}
//]]>
</script>
</head>
<body onLoad="loadImage();">
<img id="img" src="http://example.com/img.jpg" />
</body>
</html>
The only problem is that you're not using var to declare the img variable. There is no problem with the fact that the rest of the body may not have been parsed, so don't worry about that.
The reason that the absence of var is causing a problem here is that img is colliding with property of the global object created for you by the browser. In IE, each element with an ID creates a property of the global object (which is therefore accessible everywhere) corresponding to that ID. This property is read-only, so if you try and assign to it, you get an error. If you declare it first, you create a new variable which doesn't interfere with IE's global property and it will work as you expect.
You would also find that changing the variable name not to collide with an ID or property of window would fix the problem:
banana = document.getElementById("img");
banana.src = "http://example.com/img.png";
... but this is not a good idea either since you're automatically polluting the global scope with your banana, which could have consequences in other code, and in ECMAScript 5 strict mode you would get an error.
Finally, unless you're using XHTML (which you almost certainly shouldn't be and your example doesn't have an XHTML doctype), there's no need for the CDATA mark-up. You should remove it.
Moral of the story: always declare your variables.
加载中,请稍侯......
精彩评论