JS как использовать два арифметических оператора

Question

Я хочу получить данные из полей ввода и выполнить две арифметические операции одновременно (1) умножение (2) сложение.Умножение работает, но когда я пытаюсь выполнить 2-ю операцию, я получаю некоторую ошибку.например 2 * 2 + 2 = 6, но когда я пытаюсь ответить, приходит 42.

мой код здесь.

 <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>

Answer 1

Вы пытаетесь работать со строкой.

Вы делаете что-то '2' + '0' , что приведет к '20 ' не 2 .

Потому что здесь оператор + делает объединение двух строк не арифметическим сложением

Измените его число.

<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>

Answer 2

Как вы можете видеть в этом примере, первое поле будет вызывать умножение, а остальные объединят (просто добавят) к последней существующей цифре, которая увеличивает длину, но не выполняет никаких математических операций.

<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>

Это потому, что вы добавляете две строки вместе вместо чисел.Строки, сложенные вместе, выглядят так:

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

console.log(str + str2);

Так что имеет смысл, что они добавляют .Числа выглядят так:

console.log(1 + 5);

Что делает то, что вы ожидаете, но важно понимать, что оператор + имеет несколько функций.он может либо добавить , либо выполнить математика .Разница в том, какой тип операции выполняется, основана исключительно на type данных, которые вы используете.

• к строке добавится
• к числу добавится

Так что в вашем коде, когда вы получаете значение с помощью .val() - происходит следующее:вы получаете строка значения, а не число значения.Чтобы исправить это, мы можем сделать несколько разных вещей.Методы

parseInt или Number преобразуют значения из .val() в целые числа:

<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>

Один другой способ привести строку к числу - просто поместить оператор + перед значением.Это заставит интерпретатор автоматически попытаться изменить значение на число.

<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>

Answer 3

Используйте parseInt (), чтобы убедиться, что вы получаете int-версию значения, похоже, что он добавляет c в виде строки