Почему значения входных элементов не меняются? - PullRequest
Новая
       0

Почему значения входных элементов не меняются?

0 голосов
/ 07 февраля 2019

Я изучаю Javascript и сейчас пытаюсь создать простой калькулятор.

Я добавил четыре кнопки для базовой арифметической операции и три элемента ввода.

Я прикрепил eventListener к каждой кнопке.Проблема, с которой я сталкиваюсь, заключается в том, что, когда я ввожу два числа и нажимаю на любую из четырех кнопок, я вижу результат только в течение половины секунды, а затем все значения ввода исчезают.

Вот код. 

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});
body {
  text-align: center;
}
<body>
  <h1>SIMPLE CALCULATOR</h1>
  <form>
    <label for="first">Number 1:</label>
    <input id="first" type="text" value="">
    <br><br>

    <label for="second">Number 2:</label>
    <input type="text" value="" id="second">
    <br><br>

    <label for="result">Result :</label>
    <input type="text" value="" id="result">
    <br><br>

    <button id="ADD">ADD</button>
    <button id="SUB">SUB</button>
    <button id="MUL">MUL</button>
    <button id="DIV">DIV</button>
  </form>
</body>

Ответы [ 5 ]

0 голосов
/ 07 февраля 2019

Поскольку ваша разметка находится внутри элемента form, при нажатии на кнопку будет отправлена ​​форма.либо удалите form, либо добавьте event.preventDefault(); в событие нажатия; 

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
  event.preventDefault();
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
  event.preventDefault();
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
  event.preventDefault();
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
  event.preventDefault();
});
body {
  text-align: center;
}
<body>
  <h1>SIMPLE CALCULATOR</h1>
  <form>
    <label for="first">Number 1:</label>
    <input id="first" type="text" value="">
    <br><br>

    <label for="second">Number 2:</label>
    <input type="text" value="" id="second">
    <br><br>

    <label for="result">Result :</label>
    <input type="text" value="" id="result">
    <br><br>

    <button id="ADD">ADD</button>
    <button id="SUB">SUB</button>
    <button id="MUL">MUL</button>
    <button id="DIV">DIV</button>
  </form>
</body>
0 голосов
/ 07 февраля 2019

Вам необходимо удалить HTML-тег "form".Форма отправляется после нажатия любой кнопки, поэтому результат исчезает.

0 голосов
/ 07 февраля 2019

Вы можете добавить к своей форме действие action="javascript:void(0);" 

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});
body {
  text-align: center;
}
<form action="javascript:void(0);">
  <label for="first">Number 1:</label>
  <input id="first" type="text" value="">
  <br><br>

  <label for="second">Number 2:</label>
  <input type="text" value="" id="second">
  <br><br>

  <label for="result">Result :</label>
  <input type="text" value="" id="result">
  <br><br>

  <button id="ADD">ADD</button>
  <button id="SUB">SUB</button>
  <button id="MUL">MUL</button>
  <button id="DIV">DIV</button>

</form>

Я не думаю, что в этом случае вам даже понадобится тег формы, вы можете просто сделать это без одного: 

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});
body {
  text-align: center;
}
<label for="first">Number 1:</label>
<input id="first" type="text" value="">
<br><br>

<label for="second">Number 2:</label>
<input type="text" value="" id="second">
<br><br>

<label for="result">Result :</label>
<input type="text" value="" id="result">
<br><br>

<button id="ADD">ADD</button>
<button id="SUB">SUB</button>
<button id="MUL">MUL</button>
<button id="DIV">DIV</button>
0 голосов
/ 07 февраля 2019

Просто добавьте type="button" в кнопки 

var res = document.getElementById('result');

document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});

document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});

document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});

document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});
body {
  text-align: center;
}
<body>
  <h1>SIMPLE CALCULATOR</h1>
  <form>
    <label for="first">Number 1:</label>
    <input id="first" type="text" value="">
    <br><br>

    <label for="second">Number 2:</label>
    <input type="text" value="" id="second">
    <br><br>

    <label for="result">Result :</label>
    <input type="text" value="" id="result">
    <br><br>

    <button type="button" id="ADD">ADD</button>
    <button type="button" id="SUB">SUB</button>
    <button type="button" id="MUL">MUL</button>
    <button type="button" id="DIV">DIV</button>
  </form>
</body>
0 голосов
/ 07 февраля 2019

Это потому, что это форма.Добавьте прослушиватель событий, чтобы убедиться, что форма не обновляет страницу (действие по умолчанию, если action не задано или недействительно): 

document.querySelector("form").addEventListener("submit", e => e.preventDefault());
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...