CODEWITHSUNDEEP
jquerycssaddition
Kristine
Kristine

Reputation: 747

jQuery does not add values, but lines them

This maybe is a silly question, but I am lost!

So, I am trying to change div height with jQuery by adding values, but they are not adding up, but lining. Maybe some of you have had the same problem?

My code:

jQuery( document ).ready(myfunction);
$(window).resize(myfunction);

function myfunction() {
    var divH = $('.container').css("height");
    divH = divH .replace(/px/g, "");

    var innerH = divH + 130;

    $('.divRight').css("width", innerH);
}

For example, .container height is 100px, the output should be 230px (100+130), but instead it shows 100130

Do you guys have any idea why???

Thank you in advance!

Upvotes: 1

Views: 64

Answers (5)

Kha Tran
Kha Tran

Reputation: 1

I this with this case you should use height, width function of JQuery 

 function myfunction() {
        var divH = $('.container').height();
        var innerH = divH + 130; 
        $('.divRight').width(innerH);
    }

Upvotes: 0

sonam gupta
sonam gupta

Reputation: 785

Always use parseInt for numeric strings.It will provide the accurate result.And if you have to calculate in decimals then use parseFloat for this purpose.

var divH = parseInt($('.container').css("height"), 10);

or

var innerH = parseInt(divH) + 130;

Upvotes: 1

Balachandran
Balachandran

Reputation: 9637

You have to convert string into number adding + before string or use number() or parseInt()

 var innerH = +divH + 130;  // 230

Convert string into number: Number(divH ),parseInt(divH );

OR 

 var innerH =  130 + divH;  // 230

NOTE: Actually divH is string ,when you adding this into number it will be concatenate not add

Upvotes: 1

pederOverland
pederOverland

Reputation: 890

You are adding a number to a string. If you do a parseInt(divH, 10) before you add 130 to it you should be fine.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337627

The issue is because you are concatenating string values, instead of adding integers. You need to convert the height() value to an int which you can achieve by using parseInt():

$(document).ready(myfunction);
$(window).resize(myfunction);

function myfunction() {
    var divH = parseInt($('.container').css("height"), 10);
    var innerH = divH + 130;
    $('.divRight').css("width", innerH);
}

Upvotes: 2

Related Questions