Adding comma to number with jQuery, NaN

Question

I'm trying to write a function that when a user clicks "plus" or "minus" an input box is updated with an integer only I need to add the commas on each click manually.

If you click minus, it works at first but hitting it again renders it NaN . If I console.log this value it strips all characters after the first comma, this may not make much sense but take a look at the fiddle for a better example...

JS

function addCommas(intNum) {
  return (intNum + '').replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}

$('#plus').on('click', function() {
    var value = $("#propertyValueSliderValue").val();
    $("#propertyValueSliderValue").val(addCommas(value));
 });

$('#minus').on('click', function() {
    var curVal = $("#propertyValueSliderValue").val();
    var val = 500;
    var newVal = curVal - val; 
    //newVal = newVal.replace(/,/g, "");

    alert( newVal );
    $("#propertyValueSliderValue").val(addCommas(newVal));
});

https://jsfiddle.net/5qhof0fq/1/

Answer 1

instead of var curVal = $("#propertyValueSliderValue").val(); in minus function,

remove the commas and then parse it.

var curVal = $("#propertyValueSliderValue").val();
curVal = parseInt(curVal.replace(/,/g, ""))

Answer 2

The issue is because the , is meaning that the value from the input cannot be coerced to an integer. You need to replace the commas before performing any mathematical operations: .replace(/,/g, '')

 function addCommas(intNum) { return (intNum + '').replace(/(\\d)(?=(\\d{3})+$)/g, '$1,'); } $('#plus').on('click', function() { var value = $("#propertyValueSliderValue").val().replace(/,/g, ''); $("#propertyValueSliderValue").val(addCommas(value)); }); $('#minus').on('click', function() { var curVal = $("#propertyValueSliderValue").val().replace(/,/g, ''); var val = 500; var newVal = curVal - val; $("#propertyValueSliderValue").val(addCommas(newVal)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="custom-slider property-value"> <div class="slider-wrap"> <div id='minus'>-</div> <div id='plus'>+</div> </div> <div class="slider-value money"> <input class="s-value number" type="tel" id="propertyValueSliderValue" value="120000" /> </div> </div> 

Alternatively, you can use a data attribute to hold the value to use in the calculation while keeping the UI-friendly value separate. You can also use another data attribute to hold the increment to be added/removed from the value so that you can DRY up the click event handlers:

 function addCommas(intNum) { return (intNum + '').replace(/(\\d)(?=(\\d{3})+$)/g, '$1,'); } var $propertySliderValue = $("#propertyValueSliderValue"); $('.inc').on('click', function() { var value = $propertySliderValue.data('value') + $(this).data('inc'); $propertySliderValue.val(addCommas(value)).data('value', value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="custom-slider property-value"> <div class="slider-wrap"> <div id='minus' class="inc" data-inc="-500">-</div> <div id='plus' class="inc" data-inc="500">+</div> </div> <div class="slider-value money"> <input class="s-value number" type="tel" id="propertyValueSliderValue" data-value="120000" value="120,000" /> </div> </div> 

Answer 3

It happens because when you get the value out the #propertyValueSliderValue it is a String:

change your code to this:

$('#minus').on('click', function() {
  var curVal = $("#propertyValueSliderValue").val();
  var parseVal = parseInt(curVal);
  var val = 500;
  var newVal = parseVal - val; 
  //newVal = newVal.replace(/,/g, "");

  alert( newVal );
  $("#propertyValueSliderValue").val(addCommas(newVal));
});

Answer 4

It's because you read the value out of the input every time, and technically a number with the comma isn't a number in javascript. What you can do is make a variable to keep track of the real number and only output the comma version to the user.

 var value = parseInt($("#propertyValueSliderValue").val()); var interval = 500; function addCommas(intNum) { return (intNum + '').replace(/(\\d)(?=(\\d{3})+$)/g, '$1,'); } $('#plus').on('click', function() { value += interval; var commaNotatedVal = addCommas(value); $("#propertyValueSliderValue").val(commaNotatedVal); }); $('#minus').on('click', function() { value -= interval; var commaNotatedVal = addCommas(value); $("#propertyValueSliderValue").val(commaNotatedVal); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="custom-slider property-value"> <div class="slider-wrap"> <div id='minus'>-</div> <div id='plus'>+</div> </div> <div class="slider-value money"> <input class="s-value number" type="tel" id="propertyValueSliderValue" value="120000" /> </div> </div>