Javascript:Inconsistency with arithmetic operators?

Question

Background: In Finland the conventional grading system in schools is based on numbers and minus/plus signs. If a student gets 6+, that equals to 6.25, and 6- is equal to 5.75.

I have the following code:

function miinustin() {
  var vanha = $('#summa').val();
  var valiUusi = vanha.slice(0, -1);
  var vikamerkki = vanha.slice(-1);
  if (vikamerkki === "-") {
    var uusi = valiUusi - 0.25;
    $('#summa').val(uusi);
  } else if (vikamerkki === "+") {
    var uusi = valiUusi + 0.25;
    $('#summa').val(uusi);
  } else if (vikamerkki === "½") {
    var uusi = valiUusi + 0.5;
    $('#summa').val(uusi);
  }
};

$('#summa').on("input", miinustin);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" id="summa">

Why does 6- become 5.75 but 6+ becomes 60.25 and 6½ becomes 60.50, and how do I overcome this problem? I do realise that for some reason in the else if statements 0.25 and 0.50 are not considered numeric values, but why?

If you want good help it would be nice to translate de variable names to english so everyone can understand what they mean :) — EnriqueDev
– EnriqueDev, Commented May 23, 2017 at 14:23
for addition, you need to cast the string (input) to number. an easy way is to prepend a plus sign. — Nina Scholz
– Nina Scholz, Commented May 23, 2017 at 14:24
You are adding strings and numbers. "6" + 0.25 is "60.25" because 0.25 is coerced to "0.25". — Jared Smith
– Jared Smith, Commented May 23, 2017 at 14:25
Tip: + is not always an arithmetic operator in JavaScript. — Álvaro González
– Álvaro González, Commented May 23, 2017 at 14:26

Nina Scholz · Accepted Answer · 2017-05-23 14:44:20Z

If one of the operands is a string, then the result of the expression with a plus oparator is a string.

For addition, you need to cast the string (input) to number. An easy way is to prepend a plus sign as unary plus to get a number for all operations.

var valiUusi = +vanha.slice(0, -1);
//             ^ unary +

function miinustin() {
  var vanha = $('#summa').val();
  var valiUusi = +vanha.slice(0, -1);
  var vikamerkki = vanha.slice(-1);
  if (vikamerkki === "-") {
    var uusi = valiUusi - 0.25;
    $('#summa').val(uusi);
  } else if (vikamerkki === "+") {
    var uusi = valiUusi + 0.25;
    $('#summa').val(uusi);
  } else if (vikamerkki === "½") {
    var uusi = valiUusi + 0.5;
    $('#summa').val(uusi);
  }
};

$('#summa').on("input", miinustin);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" id="summa">

For some reason, this stops the script from working altogether?

shrewdbeans · Accepted Answer · 2017-05-23 17:02:26Z

It looks like the values valiUusi and vikamerkki are both strings, which means that JavaScript will try to concatenate 0.25 or 0.5 instead of add or subtract them.

The solution is to convert those values into numbers before you use them, using parseInt:

function miinustin() {
  var vanha = $('#summa').val();
  var valiUusi = parseInt(vanha.slice(0, -1), 10);
  var vikamerkki = vanha.slice(-1);

  if (vikamerkki === "-") {
    var uusi = valiUusi - 0.25;
    $('#summa').val(uusi);
  } else if (vikamerkki === "+") {
    var uusi = valiUusi + 0.25;
    $('#summa').val(uusi);
  } else if (vikamerkki === "½") {
    var uusi = valiUusi + 0.5;
    $('#summa').val(uusi);
  }
};

$('#summa').on("input", miinustin);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" id="summa">

This works for one runthrough, but if I decide to press (for example) - again, things go awry.

user1428716 · Accepted Answer · 2017-05-23 14:43:04Z

JavaScript is Dynamically Typed Language.

var vanha = $('#summa').val(); // Is a String 
var valiUusi = vanha.slice(0, -1); // Is a String

Data types are converted automatically as needed during script execution

When you do  var uusi = valiUusi + 0.25; //

valiUusi is taken as a String - In expressions involving numeric and string values with the + operator, JavaScript converts numeric values to strings

Hence the value becomes 60.25

However In statements involving other than "+" operators, JavaScript does not convert numeric values to strings

Hence var uusi = valiUusi + 0.25; becomes 5.75

The correct way to approach is to use : parseInt or parseFloat()

For further reading : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

TwoRE · Accepted Answer · 2017-05-23 14:43:12Z

0

Thank you for pointing out the reason my code didn't work!

I found out (after knowing what to google for) that this works as well:

var valiUusi = vanha.slice(0, -1); 
valiUusi = Number(valiUusi);

Now the script works as intended: every time - is pressed, 0.25 is deducted from the value in the textfield. + and ½ work as well.

answered May 23, 2017 at 14:43

TwoRE

577 bronze badges

Collectives™ on Stack Overflow

Javascript:Inconsistency with arithmetic operators?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Related