为什么输入元素的值没有变化？

时间：2019-02-07 08:34:33

标签： javascript html css html5

我正在学习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 :(得分：4)

这是因为它是一种形式。添加事件侦听器以确保表单不会刷新页面（当action未给出或无效时的默认操作）：

document.querySelector("form").addEventListener("submit", e => e.preventDefault());

答案 1 :(得分：3)

只需将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>

答案 2 :(得分：1)

您可以将操作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>

答案 3 :(得分：1)

您需要删除“ form” html标签。单击任何按钮后都将提交表单，因此结果将消失。

答案 4 :(得分：1)

由于您的标记位于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>

相关问题
最新问题