Не получается вывести число в input JQuery

Question

Необходимо написать калькулятор. Все вроде получилось, но вот с кнопкой M много вопросов. Если поле памяти пусто, нужно вывести в него результат, а если не пусто, то прибавить к нему полученный результат. Много что попробовал, но выводит либо NaN, либо object htmlinputelement . Уже долго не могу понять, где ошибка.

Помогите, пожалуйста, разобраться.

<!DOCTYPE html>

<head>
  <title>Страница</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="/../js/calculator.js"></script>
</head>

<body>
  <form id="calc">
    <label>Первое число:</label><input type="text" name="first" />
    <label>Второе число:</label><input type="text" name="second" />
    <input type="button" name="plus" value="+" />
    <input type="button" name="minus" value="-" />
    <input type="button" name="div" value="/" />
    <input type="button" name="umn" value="*" />
    <input type="button" name="pow" value="x^Y" />
    <input type="button" name="mry" value="M" />
    <input type="button" name="clean" value="C" />
    <label>Результат:</label><input readonly type="text" name="result" id="result" placeholder="Ответ" />
    <label>Память:</label><input readonly type="number" id="mem" name="mem" placeholder="Память" />
  </form>
</body>
<style>
  input {
    outline: none;
  }
  
  div {
    margin: 10px 0;
    text-align: center;
  }
  
  div label {
    margin: 0 10px 0 0;
  }
  
  div input[type=text] {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #000033;
  }
  
  div input[type=button] {
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 16px;
    border: 1px solid #000033;
    cursor: pointer;
  }
</style>
<script>
  var output;
  var NewRes;
  $("input[name=plus]").click(function() { // Событие нажатия на кнопку "Расчёт"
    var first = $("input[name=first]").val() * 1; // Переменная первого числа
    var second = $("input[name=second]").val() * 1; // Переменная второго числа
    var result; // Переменная результата
    result = +first + second;
    NewRes = result;
    output = $("input[name=result]").val(result);
  });
  $("input[name=minus]").click(function() { // Событие нажатия на кнопку "Расчёт"
    var action = $("select[name=action]").val(); // Получаем значение действия, которое нужно выполнить
    var first = $("input[name=first]").val() * 1; // Переменная первого числа
    var second = $("input[name=second]").val() * 1; // Переменная второго числа
    var result; // Переменная результата
    var output;
    result = Number(first) - Number(second);
    NewRes = result;
    output = $("input[name=result]").val(result);
    window.alert(result);
  });
  $("input[name=div]").click(function() { // Событие нажатия на кнопку "Расчёт"
    var first = $("input[name=first]").val() * 1; // Переменная первого числа
    var second = $("input[name=second]").val() * 1; // Переменная второго числа
    var result; // Переменная результата
    var output;
    result = first / second;
    NewRes = result;
    output = $("input[name=result]").val(result);
  });
  $("input[name=pow]").click(function() { // Событие нажатия на кнопку "Расчёт"
    var first = $("input[name=first]").val() * 1; // Переменная первого числа
    var second = $("input[name=second]").val() * 1; // Переменная второго числа
    var result; // Переменная результата
    var output;
    result = +Math.pow(first, second);
    NewRes = result;
    output = $("input[name=result]").val(result);
  });
  $("input[name=umn]").click(function() { // Событие нажатия на кнопку "Расчёт"
    var first = $("input[name=first]").val() * 1; // Переменная первого числа
    var second = $("input[name=second]").val() * 1; // Переменная второго числа
    var result; // Переменная результата
    var output;
    result = first * second;
    NewRes = result;
    output = $("input[name=result]").val(result);
  });
  $("input[name=mry]").click(function() {
    if (("input[name=umn]").click) // Событие нажатия на кнопку "Расчёт"
      var first = $("input[name=first]").val() * 1; // Переменная первого числа
    var second = $("input[name=second]").val() * 1; // Переменная второго числа
    var result = 0; // Переменная результата
    var output;
    result = parseInt(first * second);
    window.alert(result);
    $("input[name=clean]").click(function() {
      $('#calc')[0].reset();
    });
  });
</script>

</html>

Answer 1

Конструкция if (("input[name=umn]").click) лишняя и не несет никакого смысла, она ничего не делает - неправильный синтаксис. Вам нужно изучить конструкцию if/else
Как я понял, задача кнопки M выполнять функцию кнопки M+ как на обычном калькуляторе, т.е. записывать в память результаты операций по нажатию + если ранее уже был записан какой-то результат, то вывести сумму прошлого сохраненного значения и нового результата. Для этого, подготовим отдельную переменную memory с значением 0, в которую мы будем записывать результаты и которая будет выводиться в поле "Память". Нулевое значение нам нужно, чтобы избежать ошибок при дальнейшем сложении. Далее в обработчике события input[name=mry] проверяем, есть ли в переменной NewRes значение выполненной операции. Если она равна undefined, то пользователь не произвел каких операций, значит нам нечего записывать в память. Об этом сообщаем пользователю через alert. Иначе прибавляем в переменную memory результат операции NewRes и выводим в поле input[name=mem] через метод val. Если в этот метод передать значение, то он запишет его в поле .value элемента, если ничего не передать - выведет текущее значение этого поля. Для понимания, value в инпутах - это введенный вами текст. Далее у вас небольшая опечатка, выносим обработчик input[name=clean] наружу из текущего обработчика. Иначе, он бы добавлялся каждый раз, как только вы нажимали на кнопку M + при запуске приложения обработчик бы не добавлялся (только после первого нажатия на М он бы начинал работать). Внутри обработчика функция очищает все поля формы, но также нам нужно сбросить данные, которые мы записывали внутри логики. Сбрасываем все переменные.

var output;
      var NewRes;
      var memory = 0;
      $("input[name=plus]").click(function() { // Событие нажатия на кнопку "Расчёт"
        var first = $("input[name=first]").val() * 1; // Переменная первого числа
        var second = $("input[name=second]").val() * 1; // Переменная второго числа
        var result; // Переменная результата
        result = +first + second;
        NewRes = result;
        output = $("input[name=result]").val(result);
      });
      $("input[name=minus]").click(function() { // Событие нажатия на кнопку "Расчёт"
        var action = $("select[name=action]").val(); // Получаем значение действия, которое нужно выполнить
        var first = $("input[name=first]").val() * 1; // Переменная первого числа
        var second = $("input[name=second]").val() * 1; // Переменная второго числа
        var result; // Переменная результата
        var output;
        result = Number(first) - Number(second);
        NewRes = result;
        output = $("input[name=result]").val(result);
        window.alert(result);
      });
      $("input[name=div]").click(function() { // Событие нажатия на кнопку "Расчёт"
        var first = $("input[name=first]").val() * 1; // Переменная первого числа
        var second = $("input[name=second]").val() * 1; // Переменная второго числа
        var result; // Переменная результата
        var output;
        result = first / second;
        NewRes = result;
        output = $("input[name=result]").val(result);
      });
      $("input[name=pow]").click(function() { // Событие нажатия на кнопку "Расчёт"
        var first = $("input[name=first]").val() * 1; // Переменная первого числа
        var second = $("input[name=second]").val() * 1; // Переменная второго числа
        var result; // Переменная результата
        var output;
        result = +Math.pow(first, second);
        NewRes = result;
        output = $("input[name=result]").val(result);
      });
      $("input[name=umn]").click(function() { // Событие нажатия на кнопку "Расчёт"
        var first = $("input[name=first]").val() * 1; // Переменная первого числа
        var second = $("input[name=second]").val() * 1; // Переменная второго числа
        var result; // Переменная результата
        var output;
        result = first * second;
        NewRes = result;
        output = $("input[name=result]").val(result);
      });
      $("input[name=mry]").click(function() {
        if (NewRes === undefined) {
          window.alert('Выполните операцию');
        } else {
          memory += NewRes;
          window.alert(NewRes);
          $("input[name=mem]").val(memory);
        }
      });
      $("input[name=clean]").click(function() {
        NewRes = undefined;
        memory = 0;
        $('#calc')[0].reset();
      });

input {
        outline: none;
      }

      div {
        margin: 10px 0;
        text-align: center;
      }

      div label {
        margin: 0 10px 0 0;
      }

      div input[type=text] {
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid #000033;
      }

      div input[type=button] {
        padding: 6px 10px;
        border-radius: 10px;
        font-size: 16px;
        border: 1px solid #000033;
        cursor: pointer;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="calc">
      <label>Первое число:</label><input type="text" name="first" />
      <label>Второе число:</label><input type="text" name="second" />
      <input type="button" name="plus" value="+" />
      <input type="button" name="minus" value="-" />
      <input type="button" name="div" value="/" />
      <input type="button" name="umn" value="*" />
      <input type="button" name="pow" value="x^Y" />
      <input type="button" name="mry" value="M" />
      <input type="button" name="clean" value="C" />
      <label>Результат:</label><input readonly type="text" name="result" id="result" placeholder="Ответ" />
      <label>Память:</label><input readonly type="number" id="mem" name="mem" placeholder="Память" />
    </form>

БЛОГ НА HUSL

Не получается вывести число в input JQuery

Ответы (1 шт):