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;
}

正如我上面所说，使用按钮而不是“＆＃39;

时会显示结果

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

我想知道为什么修改后的HTML会切换回默认值，解决方法如何避免这种情况以及是否存在任何不良做法＆＃34;在我的代码中。我也试图搜索这个问题，但我找不到任何东西。我想，这只是一个愚蠢的问题，但正如我所说，我是一个完整的初学者，所以请耐心等待我。

Answer 1

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

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

应该这样做。

Answer 2

<form> onsubmit默认功能是将表单信息提交给服务器，并在点击submit按钮时重置页面。

在上面的代码中，单击form submit，调用函数calc，但在调用函数后它也会重置页面，这就是为什么修改后的HTML切换回默认。

使用event.preventDefault()可以阻止此默认行为，如果该事件可取消，则会取消该事件。将此行添加到开始时，calc函数将阻止默认行为。

Refer to MDN Docs了解有关event.preventDefault()

的更多信息

Answer 3

你可以简单地挤进行

document.getElementById("calcForm").reset();

行后

document.getElementById('calcRes').innerHTML = "Result is " + res;

但您必须将id="calcForm"添加到<form>代码。

提交动作是理解为简单地结束所有用户输入并使用它做一些事情。之后，您不再需要输入，因此会自动删除。按下按钮，表单不知道您实际完成了输入。它只需按一下按钮。所以它会保留输入。

表单提交后重置HTML

3 个答案: