Получение NaN при попытке выполнить вычисления с использованием чисел, полученных из текстовых полей в JS

Пытаюсь сделать простой калькулятор на javascript. Однако всякий раз, когда я нажимаю кнопки сложения, вычитания, умножения или деления, я получаю результат NaN. Однако я знаю, что числа успешно получены, потому что я могу предупредить (input1, input2), если я введу этот код. Однако я не понимаю, почему он не позволяет мне работать с двумя переменными. Я не получаю ошибок в консоли JS.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Calculator</title>
  <link rel="stylesheet" href="calculator.css" />
  <script>
    var input1, input2

    function getNumbers() {
      input1 = Number(document.getElementById("imp1").value);
      input2 = Number(document.getElementById("imp2").value);
    }

    function sum(input1, input2) {
      getNumbers();
      var sum = input1 + input2;
      alert(sum);
    }

    function diff(input1, input2) {
      getNumbers();
      var diff = input1 - input2;
      alert(diff);
    }

    function prod(input1, input2) {
      getNumbers();
      var prod = input1 * input2;
      alert(prod);


    }

    function quot(input1, input2) {
      getNumbers();
      var quot = input1 / input2;
      alert(quot);
    }
  </script>


  <div id="calc">
    <form name="calc_input">
      <input type="text" id="imp1" />
      <input type="text" id="imp2" />
      <!-- buttons -->
      <button onclick="sum()" id="add" value="sum">Add</button>
      <button onclick="diff()" id="subtract" value="diff">Subtract</button>
      <button onclick="prod()" id="multiply" value="prod">Multiply</button>
      <button onclick="quot()" id="divide" value="quot">Divide</button>

    </form>
  </div>

</head>

</html>


javascript nan calculator
person Alec    schedule 20.03.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

function sum(input1, input2) { Это вызывает проблему.

Здесь параметры будут иметь приоритет над глобальной переменной, и, поскольку вы не передаете никакого значения, они останутся undefined и, следовательно, NaN

Все, что вам нужно сделать, это удалить эти аргументы, поскольку вы хотите использовать глобальные переменные.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Calculator</title>
  <link rel="stylesheet" href="calculator.css" />
  <script>
    var input1, input2

    function getNumbers() {
      input1 = Number(document.getElementById("imp1").value);
      input2 = Number(document.getElementById("imp2").value);
    }

    function sum() {
      getNumbers();
      var sum = input1 + input2;
      alert(sum);
    }

    function diff() {
      getNumbers();
      var diff = input1 - input2;
      alert(diff);
    }

    function prod() {
      getNumbers();
      var prod = input1 * input2;
      alert(prod);


    }

    function quot() {
      getNumbers();
      var quot = input1 / input2;
      alert(quot);
    }
  </script>


  <div id="calc">
    <form name="calc_input">
      <input type="text" id="imp1" />
      <input type="text" id="imp2" />
      <!-- buttons -->
      <button onclick="sum()" id="add" value="sum">Add</button>
      <button onclick="diff()" id="subtract" value="diff">Subtract</button>
      <button onclick="prod()" id="multiply" value="prod">Multiply</button>
      <button onclick="quot()" id="divide" value="quot">Divide</button>

    </form>
  </div>

</head>

</html>

Альтернативный подход

  • Вы можете удалить глобальные переменные и вернуть массив чисел из getNumbers. Создав общий шаблон для выборки входов с использованием составного селектора, а не идентификаторов, вы можете добавить / удалить любое количество входов.
  • У вас может быть общая функция, которая будет обрабатывать входные данные, поскольку структура для всех одинакова.
  • Принять оператора и обработать соответствующим образом.

function getNumbers() {
  var inputs = document.querySelectorAll('form[name="calc_input"] input[type="text"]');
  var nums = [];
  for(var i = 0; i< inputs.length; i++){
    nums.push(Number(inputs[i].value))
  }
  return nums;
}

function operate(operator){
  var nums = getNumbers();
  var result = nums.reduce(function(p,c){
    switch(operator){
      case "+": return p+c;
      case "-": return p-c;
      case "*": return p*c;
      case "/": return p/c
    }
  })
  alert(result);
}
<div id="calc">
  <form name="calc_input">
    <input type="text" id="imp1" />
    <input type="text" id="imp2" />
    <!-- buttons -->
    <button onclick="operate('+')" id="add" value="sum">Add</button>
    <button onclick="operate('-')" id="subtract" value="diff">Subtract</button>
    <button onclick="operate('*')" id="multiply" value="prod">Multiply</button>
    <button onclick="operate('/')" id="divide" value="quot">Divide</button>
  </form>
</div>

person Rajesh    schedule 20.03.2017
comment
как я мог это исправить? Значение не может быть передано, пока пользователь не введет его. Должен ли я запускать этот код только после того, как пользователь ввел свои значения с помощью оператора if? - person Alec; 20.03.2017
comment
@ alec935 Не указывайте параметры, если вы их не используете. Так что просто function sum() и так далее. - person JJJ; 20.03.2017
comment
@ alec935 Пожалуйста, проверьте обновленный код. Я добавил альтернативный подход для более общей структуры. Надеюсь, это поможет. :-) - person Rajesh; 20.03.2017

arrow_upward
0
arrow_downward

Вы должны передать всю свою переменную в целое число ... теперь она отображается в виде строки, поэтому она не вычисляется так, как вы хотите. Вот код, который вы можете проверить ...

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Calculator</title>
  <link rel="stylesheet" href="calculator.css" />
  <script>


    function sum(input1, input2) {
      input1 = Number(document.getElementById("imp1").value);
  input2 = Number(document.getElementById("imp2").value);
      var sum = parseInt(input1) + parseInt(input2);
      alert(sum);
    }


  </script>


  <div id="calc">
    <form name="calc_input">
      <input type="text" id="imp1" />
      <input type="text" id="imp2" />
      <!-- buttons -->
      <button onclick="sum()" id="add" value="sum">Add</button>
      <button onclick="diff()" id="subtract" value="diff">Subtract</button>
      <button onclick="prod()" id="multiply" value="prod">Multiply</button>
      <button onclick="quot()" id="divide" value="quot">Divide</button>

    </form>
  </div>

</head>

</html>
person Milan Parekh    schedule 20.03.2017
comment
Я все еще получаю ту же Нан - person Alec; 20.03.2017
comment
@ alec935 я обновил свой js, проверьте и попробуйте еще раз демонстрационная ссылка jsfiddle.net/1z45x8c9 - person Milan Parekh; 20.03.2017