A web page of a web application was showing a strange error. I regressively removed all the HTML/CSS/JS code and arrived to the basic and simple code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>test</title>
<script type="text/javascript">
var TestObj =
{
foo: function() {}
}
alert(x); //ok displays "undefined"
var x = TestObj.foo;
var z = TestObj.foo;
</script>
</head><body>
<p onclick='alert(x);'>Click shows function foo!</p>
<img onclick='alert(x);' alt='CRAZY click displays a number in FF/Safari not function foo' src='' style='display: block; width: 100px; height: 100px; border: 1px solid #00ff00;'>
<p onclick='alert(x);'>Click shows function foo!</p>
</body></html>
It’s crazy: when clicking on P elements the string “function(){}” is displaied as expected. But when clicking on IMG element it shows a number as if x function got in some way removed from memory or deinstantiated (it does not even show x as “undefined” but as a number).
To let you test it quickly I placed the working test above also here.
This can be reproduced on both Firefox 3.6 and Safari 4.0.4.
Everything works properly only on IE7+.
I’m really clueless, I was wondering if x is maybe a reserved keyword in JS Firefox/Safari. Thanks to anyone who could help!
FYI:
- if you repalce x() with z()
everything work prefectly in all
browsers (this is even more crazy to
me) - adding a real image in src
attribute does not fix the problem - removing style in img does not fix
the problem (i gave style to image
only to help you clicking on image
thus you can see the imnage border)
Your problem is with variable scope, not that “x” is reserved. An image object has a property named “x”. You can see this with Chrome’s developer tools. When you call “alert(x);” on the image object, the “x” in scope is the “x” property on the image.