为什么输入元素的值不会改变？

问题描述 投票：3回答：5

我正在学习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>
javascript html css html5
5个回答
4
投票

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

document.querySelector("form").addEventListener("submit", e => e.preventDefault());
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>
1
投票

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

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>
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.