Is x a reserved keyword in Javascript FF/Safari not in IE?
Posted
by Marco Demaio
on Stack Overflow
See other posts from Stack Overflow
or by Marco Demaio
Published on 2010-03-22T19:20:11Z
Indexed on
2010/03/22
19:31 UTC
Read the original article
Hit count: 420
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)
© Stack Overflow or respective owner
