Is there an easier way to add the value of two strings converted to numbers rather than making one of them negative and subtracting it from the other?

Why won't this work?:

<HTML>
<SCRIPT LANGUAGE=javascript>

function setNewPosition()
{
var the_top= document.all.SPAN1.style.top;
var the_height=document.all.SPAN1.style.height;
var new_top = 0;
var new_height = 0

new_top = the_top.substr(0,the_top.length-2).valueOf();
new_height = the_height.substr(0,the_height.length-2).valueOf();
var new_position = new_height.valueOf() + new_top.valueOf();

alert(new_position);
}
</SCRIPT>
<BODY>
<SPAN ID=SPAN1 style="TOP: 100px; background-color: yellow; LEFT: 75px; POSITION: absolute; HEIGHT: 30px;">The Span</SPAN>

<input type=button value="click" onclick="setNewPosition();">
</BODY>
</HTML>

Where this will:

<HTML>
<SCRIPT LANGUAGE=javascript>

function setNewPosition()
{
var the_top= document.all.SPAN1.style.top;
var the_height=document.all.SPAN1.style.height;
var new_top = 0;
var new_height = 0

new_top = the_top.substr(0,the_top.length-2).valueOf();
new_height = the_height.substr(0,the_height.length-2).valueOf();
var new_position = new_height.valueOf() - -new_top.valueOf();

alert(new_position);
}
</SCRIPT>
<BODY>
<SPAN ID=SPAN1 style="TOP: 100px; background-color: yellow; LEFT: 75px; POSITION: absolute; HEIGHT: 30px;">The Span</SPAN>

<input type=button value="click" onclick="setNewPosition();">
</BODY>
</HTML>