Decrease integer working, identical increase integer is not

Question

Increase and decrease should add or subtract 0.1 to the current value. They are setup the same. For some reason decrease works (1.0 becomes 0.9, 0.8, etc.) but increase does not (1.0 becomes 1.00.1) as if it's concatenating a string.

I have tried with parseInt and parseFloat with no luck on increase new_value = current_value + 0.1 but decrease does work new_value = current_value - 0.1

I would expect both to either work on not work the way this is setup.

HTML:

<button data-direction="increase">increase</button>
<button data-direction="decrease">decrease</button>
<input value="1.0" />

JS:

$(function() {
   var button = $('button');

   button.click(function() {
     var button = $(this);
     var direction = button.data('direction');

     var input = $('input');
     var current_value = parseFloat( input.val() ).toFixed(1);

     var new_value;

     if (direction=='increase') {
        new_value = current_value + 0.1;
     } else {
        new_value = current_value - 0.1;    
     }

     input.val(new_value);

  });

});

Fiddle:

https://jsfiddle.net/6s6w8fyd/

score 1 · Accepted Answer · answered May 14 '17 at 01:04

1

.toFixed(1) converts the Number into a String.

When adding a number to a string, the number is implicitly converted into a string, thus adding the '0.1' string to the end.

Subtracting doesn’t work on strings so it behaves a little differently: the string will be implicitly converted into a number.

You want to call .toFixed after adding or subtracting.

answered May 14 '17 at 01:04

Bertrand Marron

21,501
8
58
94

That make sense but here https://jsfiddle.net/7j9vqmfp/ I am calling .toFixed after and now increase works one time only (1.0, 1.1, 1.1) and decrease does not work (1.0, 0.9, -0.1, -0.1) – May 14 '17 at 01:18
because you changed `parseFloat` to use `parseInt`, for some unknown reason. – Bertrand Marron May 14 '17 at 01:20
oh well i thought parseInt was for converting a string to an integer in base 10. i thought i was simplifying the problem there.. whoops. anyway, thank you. – May 14 '17 at 01:26
`parseInt` **is** for converting a string to an integer. 0.9 and 1.1 are not integers. – Bertrand Marron May 14 '17 at 01:27
ah yes, my mistake. integer = whole number. duh me. so would simply Number() be more appropriate or parseFloat? – May 14 '17 at 01:34
http://stackoverflow.com/questions/11988547/what-is-the-difference-between-number-and-parsefloat – Bertrand Marron May 14 '17 at 01:54

therebelcoder · Answer 2 · 2017-05-14T04:12:57.820

You're approach for this 'problem' is way too complex and can be brought back to very simple code. First change the values of your data-direction.

<button data-direction="1">increase</button>
<button data-direction="-1">decrease</button>

If you always follow the rule that everything that comes from the view (html) is a string and needs to be cast before any calculation takes place, then your always safe.

Your javascript becomes:

$(function() {
   var button = $('button');

   var curr_value = 1; // Set it to what you want your starting value to be

   button.click(function() {
     var button = $(this);

     // direction is an integer now: 1 or -1
     var direction = parseInt(button.data('direction')); 

     // Not 'safe' to directly parse it from the input,
     // in case someone types in non numeric values.
     // Do a check or - even better - make sure non-numeric values can't be 
     // entered.
     var f = $('input');
     // check here
     var input = parseFloat(f); // input is a number here

     // Set the new curr_value
     curr_value = curr_value + (input * direction);

     input.val(curr_value);

  });

});

To be safe with this I would build in checks for the value that is typed in etc... But leave that up to you. Hope it helps...

score 0 · Answer 3 · answered May 14 '17 at 04:54

$(function() {
  function decimal(number, boo){
    number = parseFloat(number);
    return +((boo) ? (number + 0.1):(number - 0.1)).toFixed(1);
  }
  var input = $('input');
  $('button').click(function() {
    
    var direction = $(this).data('direction');
    var inputvalue = input.val();
    input.val(decimal(inputvalue, direction=="increase"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-direction="increase">increase</button>
<button data-direction="decrease">decrease</button>
<input value="1.0" />

Decrease integer working, identical increase integer is not

3 Answers3