How do I calculate the difference between two strings in Javascript?

Question

Everything was fine until when I wanted to calculate the difference between the two values and I got 0 as a result.

I'm really new to this, I'm sure it's really easy to do it and that I have to turn it from string to variable or something like that but I don't know how to do it.

oldx = parseInt(document.getElementById("character").style.left);
oldy = parseInt(document.getElementById("character").style.top);

newx = evt.pageX;
newy = evt.pageY;

disx=parseInt(oldx) - parseInt(newx);
disy=parseInt(oldy) - parseInt(newy);

document.getElementById('disx').innerHTML=disx;
document.getElementById('disy').innerHTML=disy;

I'm testing it here: http://chusmix.com/game/movechar.php You can see everything works except the end where i Get 0, 0.

How could I make it work? Thanks

Answer 1

You're just missing a parseInt()

difx=parseInt(oldx) - parseInt(newx);
  dify=parseInt(oldy) - parseInt(newy);

Answer 2

You have a problem here

document.getElementById("character").style.left = evt.pageX;
document.getElementById("character").style.top = evt.pageY;

oldx = parseInt(document.getElementById("character").style.left);
oldy = parseInt(document.getElementById("character").style.top);

newx = evt.pageX;
newy = evt.pageY;

disx = parseInt(oldx) - parseInt(newx);
disy = parseInt(oldy) - parseInt(newy); 

Here the lines

document.getElementById("character").style.left = evt.pageX;
document.getElementById("character").style.top = evt.pageY;

Overrides the original left and top style values. Please remove it and check it again.

So the script should be

function showCoords(evt){
    oldx = parseInt(document.getElementById("character").style.left);
    oldy = parseInt(document.getElementById("character").style.top);

    newx = evt.pageX;
    newy = evt.pageY;

    disx = parseInt(oldx) - parseInt(newx);
    disy = parseInt(oldy) - parseInt(newy);

    document.getElementById('oldx').innerHTML=oldx;
    document.getElementById('oldy').innerHTML=oldy;
    document.getElementById('newx').innerHTML=newx;
    document.getElementById('newy').innerHTML=newy;
    document.getElementById('disx').innerHTML=disx;
    document.getElementById('disy').innerHTML=disy;
}

You can find a working sample here .

Answer 3

Multiply a string by one to turn it to a number.

var myString = "5";

alert(myString + 19);    // 519
alert(myString*1 + 19);  // 24

Answer 4

convert character to integer first and then you will be good to go

you can use this method

variable = parseInt(variable);

Answer 5

Addition operator has an overload for string and so if you add two strings holding integer values, they will be concatenated.

However, things are a little different for subtraction

var disx = oldx - newx;
var disy = oldy - newy;

The above snippet should work fine as there is no overload subtraction operator (-) overload for string.

Example: Click to view jsFiddle

The problem is somewhere else.