JS how to use two arithmetic operators

Question

i want to get data from input fields and do two arithmetic operations at same time (1)multiplication (2) addition. Multiplication is working but when i try to do 2nd operation i get some error. for example 2*2+2=6 but when i try the answer comes 42.

my code is here .

 <script type="text/javascript">
  $(document).ready(function(){
    $('#sfpm,#snom,#bonus').keyup(function(){
      var a =$('#sfpm').val();
      var b = $('#snom').val();
      var c = $("#bonus").val();
      var taamount = a*b+c ;
      $('#staamount').val(taamount);
    });
  });

</script>

`'2'*'2' + '2' => 4 + '2' => '42'`. Use numbers for arithmetic instead of strings and you'll get the answer you expect. — Paul, Nov 29 '18 at 18:11
It's like a `police + dog = policedog`, your'e doing maths with strings. — Teemu, Nov 29 '18 at 18:12
https://stackoverflow.com/questions/1133770/how-do-i-convert-a-string-into-an-integer-in-javascript ... See also: parseInt(), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt and parseFloat(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat — mc01, Nov 29 '18 at 18:14
Use `parseInt(a, 10)` to convert your strings to numbers. You will need to check that the final result `!isNaN(taamount)` — Ryan Wheale, Nov 29 '18 at 18:14
`parseInt` ok if your only want integer arithmetic,. `parseFloat`, or `Number(val)` would make sense. — Keith, Nov 29 '18 at 18:31
@RyanWheale i checked your link but i still don't understand how to implement this code into my code ..can you write my code in your formate for understanding? please.. — Atif Raja, Nov 29 '18 at 18:33
`var a = parseInt($('#sfpm').val(), 10);`, `var b = parseInt($('#snom').val(), 10);`, `var c = parseInt($('#bonus').val(), 10);` — Ryan Wheale, Nov 29 '18 at 19:40

score 0 · Answer 1 · answered Nov 29 '18 at 18:13

0

Use parseInt() to ensure you are getting the int version of the value, it looks like it is adding c as a string

answered Nov 29 '18 at 18:13

COLBY BROOKS

331
1
5

score 0 · Answer 2 · answered Nov 29 '18 at 18:14

0

You're trying to operate on string.

You're doing something '2' + '0' which will result as '20' not 2.

Because here + operator does the concatenation of two string not arithmetic addition

Change it number.

<script type="text/javascript">
  $(document).ready(function(){
    $('#sfpm,#snom,#bonus').keyup(function(){
      var a =Number($('#sfpm').val());
      var b = Number($('#snom').val());
      var c = Number($("#bonus").val());
      var taamount = a*b+c ;
      $('#staamount').val(taamount);
    });
  });

</script>

answered Nov 29 '18 at 18:14

Code Maniac

37,143
5
39
60

– Atif Raja Nov 29 '18 at 18:36
can you share a codepen or jsfiddle link ? @AtifRaja – Code Maniac Nov 29 '18 at 18:40

zfrisch · Accepted Answer · 2018-11-29T18:40:12.577

As you can see in this example the first box will cause multiplication, but the rest will concatenate ( simply append to ) the last digit present, which increases length but doesn't do any mathematical operation.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
sfpm<input id="sfpm">
snom<input id="snom">
bonus<input id="bonus">
<hr/>total<input id="staamount">


<script type="text/javascript">
  $(document).ready(function(){
    $('#sfpm,#snom,#bonus').keyup(function(){
      var a =$('#sfpm').val();
      var b = $('#snom').val();
      var c = $("#bonus").val();
      var taamount = a*b+c ;
      $('#staamount').val(taamount);
    });
  });

</script>

This is because you're adding two strings together instead of numbers. Strings added together look like this:

let str = "Hello ", str2= "world!";

console.log(str + str2);

So it makes sense that they append. Numbers look like this:

console.log(1 + 5);

Which does what you expect, but the important thing to realize is that the + operator has multiple functions. it can either append or perform math. The difference as to what type of operation is performed is based solely on the type of the data you're using.

a string will append
a number will add

So in your code when you get the value using .val() - what's happening is that you're getting string values, not number values. To fix this we can do a few different things.

parseInt or Number methods will convert the values from .val() into integers:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
sfpm<input id="sfpm">
snom<input id="snom">
bonus<input id="bonus">
<hr/>total<input id="staamount">


<script type="text/javascript">
  $(document).ready(function(){
    $('#sfpm,#snom,#bonus').keyup(function(){
      var a = parseInt($('#sfpm').val());
      var b = Number($('#snom').val());
      var c = parseInt($("#bonus").val());
      var taamount = a*b+c ;
      $('#staamount').val(taamount || 0);
    });
  });

</script>

One other way to coerce a string to a number is to simply place the + operator before the value. This will cause the interpreter to automatically try to change the value into a number.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
sfpm<input id="sfpm"> snom
<input id="snom"> bonus
<input id="bonus">
<hr/>total<input id="staamount">


<script type="text/javascript">
  $(document).ready(function() {
    $('#sfpm,#snom,#bonus').keyup(function() {
      var a = +$('#sfpm').val();
      var b = +$('#snom').val();
      var c = +$("#bonus").val();
      var taamount = a * b + c;
      $('#staamount').val(taamount || 0);
    });
  });
</script>

JS how to use two arithmetic operators

3 Answers3