Javascript Wrong Calculations When Storing Value In A Variable or Object

Question

I am trying to animate related columns' width in my HTML layout using a slider.

in this code everything works great, here I am getting new value for another column on slide-UP.

var item.thisWidth; // current width of edited column
var item.prevCellWidth; // current width of previus/last column

fdd

if(slider.value > item.thisWidth){
     var prevNewWidth = item.prevCellWidth - (slider.value-item.thisWidth);        
     $('#r'+item.thisRowId+'s'+item.prevCellRowOrder+'').css('width', prevNewWidth + '%');
}   

But here is something weird happening after the calculation on slide-Down. The value created is in 100s of thousands. Need to keep in mind that the slider min/max value is from 0-100

"slider.value"

if(slider.value < item.thisWidth){

    var prevNewWidth = item.prevCellWidth + (item.thisWidth - slider.value);

    $('#r'+item.thisRowId+'s'+item.prevCellRowOrder+'').css('width', prevNewWidth + '%');
}

I have tried to check all values that are being passed over for calculation and they show up ok.

alert('oldWidth'+item.thisWidth+'sliderWidth'+slider.value+'previuscell'+item.prevCellWidth+'');

But when decreasing the slider I get these wrong results

e.g. 30 + (40 - 10) = 400000;  ??

UPDATE:

Sorted this out by using @rogelio's suggestion - parsing a string into an integer:

var integer = parseInt(string);

Thanks, @rogelio!

Answer 1

The problem is because slider.value is a string. Assuming that you are getting the value from an input, you will need to parse it to integer. with javascript is trivial, for example your line

var prevNewWidth = item.prevCellWidth + (item.thisWidth - slider.value);

needs to change to

var prevNewWidth = item.prevCellWidth + (item.thisWidth - parseInt(slider.value));

Answer 2

I study my self, so for simple things like that sometimes I can spend a while without having someone to direct me to the right information.

parseInt(value); here is my updated question and answer:)

 function handleSliderChange(event, slider){
     $('#r'+item.thisRowId+'s'+item.thisRowOrder).css('width', slider.value + '%');
    
     var sliderValue = parseInt(slider.value);
     var oldValue = item.thisWidth;
     var oldPrevValue = item.prevCellWidth;
     if(sliderValue > oldValue){
        var prevNewWidth = oldPrevValue - (sliderValue-oldValue);        
        $('#r'+item.thisRowId+'s'+item.prevCellRowOrder).css('width', prevNewWidth + '%');
      
        }
      if(slider.value < item.thisWidth){
        var prevNewWidth = oldPrevValue + (oldValue - sliderValue);
         
        $('#r'+item.thisRowId+'s'+item.prevCellRowOrder).css('width', prevNewWidth + '%');}
         if(slider.value === item.thisWidth){
            var prevNewWidth = sliderValue;
           
        $('#r'+item.thisRowId+'s'+item.prevCellRowOrder).css('width', prevNewWidth + '%');
         }  }

So for guys like me who is not at uni or college ... always create vars for values, in case of numbers also add parseInt(value) --> that should let you avoid common mistakes and save some time:)