javascript - 表单提交后 HTML 重置

Question

今天我开始学习 JavaScript，我想使用 JavaScript 从文本字段中计算两个数字。我想在网站本身上将结果显示为 HTML。当我使用表单提交值时，它会不断重置我修改后的 HTML(结果部分会显示一秒钟的实际结果，但会不断切换回默认值)。

使用按钮时不会发生这种情况。但是由于我想添加单选按钮以从数学运算中进行选择，所以我更喜欢一种形式(我也不太确定如何通过 JS 确定选中哪个单选按钮)。

这是我的 HTML 表单

   <form name="calcForm" onsubmit="calc(num1.value, num2.value)">
  <input type="text" id="num1">
  <input type="text" id="num2">
  <input type="submit" value="submit">
</form>

这是我的解决方案部分(使用表单时会重置)

<div id="calcRes" style="display:block;">Lorem ipsum dolor sit amet</div>

实际的 JavaScript 函数

  function calc(num1, num2) {
  var res = Number(num1)+Number(num2);
  document.getElementById('calcRes').innerHTML = "Result is " + res;
}

正如我上面所说，使用按钮而不是“表单”时会显示结果

<button onclick="calc(num1.value, num2.value)">Calculate</button>

我想知道为什么修改后的 HTML 会切换回默认值，如何避免这种情况的解决方案以及我的代码中是否存在任何“不良做法”。我也尝试搜索此问题，但找不到任何内容。我想，这只是一个菜鸟问题，但正如我所说，我是一个完全的初学者，所以请耐心等待。

Answer 1

正在提交表单，因此正在重新加载页面。为避免这种情况，您需要阻止表单的提交。在你的情况下

<form name="calcForm" onsubmit="calc(num1.value, num2.value); return false;">

应该可以解决问题。