156524 - JavaScript onClick() handler stops working

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect)

Description

[Joseph Myers]

Take a look at this code:

  <div id="thing" onclick="jumpy()">things' stuff</div>
  <script type="text/javascript">
	function jumpy() {
		var thing = document.getElementById('thing');
		thing.style.position = 'absolute';
		thing.style.top -= -10;
	}
  </script>

According to myself, "Each time this example is clicked, it jumps downscreen
another 10 pixels." However, it only does so the first time in Mozilla.

Comment 1

[Phil Schwartau]

Browser, not engine ---> DOM Level 0. But I think I see what's going wrong. 
Note your |thing.style.top -= -10| is the same as doing |thing.style.top + 10|.

Now remember that the '+' operator in JavaScript stands for EITHER
numerical addition or string concatenation. 

Note the type of |div1.style.top| is a string, not a number: e.g. "200px".
So when you add 10 via the + operator, it adds it on as a string:


                            "200px10"


Then when you try to set the style.top of your div to this, the DOM parses
off the beginning part, excluding the part that doesn't make any sense.
So the style.top is set to "200px" again and doesn't move:


                            "200px"


Note you can debug your code in Mozilla with

           Tools > Web Development > JavaScript Debugger


Here is a session from the debugger. I renamed your <div> as "div1":

div1.style.top
$[0] = [string] "200px"

div1.style.top + 10;        <<<---  See what happens if you add 10 to a string   
$[1] = [string] "200px10"

div1.style.top = "200px10"; <<<---- Here we try to set .top to "200px10"
$[2] = [string] "200px10"

div1.style.top
$[3] = [string] "200px"     <<<---- Here is the natural outcome: "200px"



I believe Mozilla is correct here, and I think IE does the same thing.
But I will let the DOM experts decide -

Comment 2

[Boris Zbarsky [:bzbarsky]]

Correct. thing.style.top is "10px", and doing |"10px" - (-10)| in JS gives
|NaN|, which is then converted to a string, "NaN", set as the value for "top"
and promptly ignored by the CSS parser as an invalid value.

In IE you get a script error when you execute this code.

As a further note, the only reason setting |top| to |10| works at all is that
the page is in quirks mode. In standards mode "10" is not a valid value for
"top" to start with, so the whole thing has no effect.