JQuery adding number value

Question

can someone help me debug this please??? i'm really don't know whats wrong with my code...

i'm trying to add number value to another number value.... but it does not work as i expected...instead it just add the number as a string.

Here is my demo: (already solved)

and here is the js code:

$(document).ready(function(){
$("#map").click(function(e){
    var x = parseInt((e.pageX - this.offsetLeft)) - parseInt("140");
    var y = parseInt((e.pageY - this.offsetTop)) - parseInt("140");


  var coor = $("#map").css("background-position").split(" ");
  var cx = parseInt(coor[0].replace("px",""));
  var cy = parseInt(coor[1].replace("px",""));


    $("#map").stop().animate({"backgroundPosition": x+cx+" "+y+cy},"slow");
     alert("X:"+x+", CX: "+cx+"\n Y:"+y+", CY:"+cy+"\n Background-pos:"+$("#map").css("background-position"));

});
});

please tell me what's wrong with it...

Fabrício Matté · Accepted Answer · 2012-06-02 01:48:21Z

3

Put parentheses () around your arithmetic operations.

$("#map").stop().animate({"backgroundPosition": (x+cx)+" "+(y+cy)},"slow");

Otherwise, adding the whitespace string will force the JS to concatenate your numbers as a string.

Fiddle example

answered Jun 2, 2012 at 1:48

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lukx · Accepted Answer · 2012-06-02 01:49:20Z

3

In your animate-Statement towards the end you set background position to:

x+cx+" "+y+cy

This is interpreted as a string, because the four +-operations are interpreted equally. You do, really, concatinate a string (" "). Thus, the entire result of this expression becomes a string and the addition is no longer an addition but a concat.

However, if you capsulate the math into parenthesis, then you should be fine. Your second-last line becomes:

$("#map").stop().animate({"backgroundPosition": (x+cx)+" "+(y+cy)},"slow");

(note the extra brackets around x+cx)

answered Jun 2, 2012 at 1:49

Lukx

1,2832 gold badges11 silver badges20 bronze badges

2 Comments

Fabrício Matté Over a year ago

You replied a little after me, but that was because of your overly explanatory answer. Well, I was expecting someone to explain it a little more in-depth and I like that, +1 =]

Lukx Over a year ago

Hahah thanks ;-) I saw your reply popping in while I was still typing, and I am glad that both of our answers helped in their own way!

zessx · Accepted Answer · 2012-06-02 01:47:05Z

0

Isn't it ?

var x = parseInt((e.pageX - $(this).offset().left)) - parseInt("140");
var y = parseInt((e.pageY - $(this).offset().top)) - parseInt("140");

answered Jun 2, 2012 at 1:47

zessx

68.9k29 gold badges139 silver badges166 bronze badges

Comments

Dan · Accepted Answer · 2012-06-02 01:52:43Z

0

The following works for me:

$("#map").click(function(e){
        alert(e.pageX);
        alert(this.offsetLeft);
        alert(parseInt(e.pageX)-parseInt(this.offsetLeft));

answered Jun 2, 2012 at 1:52

Dan

1,0332 gold badges10 silver badges35 bronze badges

Collectives™ on Stack Overflow

JQuery adding number value

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related