表单提交页面刷新（普通javascript）？

我正在学习Javascript。。。。慢慢地。。。试着用一个小小的计算器来测试我的知识

HTML:

我遇到的问题是，为什么在表单提交/按钮单击/返回键上页面会刷新？我做错了什么？在纯Javascript中，答案是什么。我知道计算器在一定程度上可以工作，因为答案在刷新前会在页面上闪烁，但它确实可以。为什么?

---

（我知道以前有人问过这个问题，但我无法用简单的Javascript和/或我能理解的解释找到答案）。

将“=”按钮的类型更改为“按钮”，即设置类型=按钮。在“=”按钮上，在客户端运行计算后，单击页面将提交到服务器。提交后会重新加载页面，这就是为什么您会看到结果闪烁一秒钟。

将“=”按钮的类型更改为“按钮”，即设置类型=按钮。在“=”按钮上，在客户端运行计算后，单击页面将提交到服务器。页面在提交后会重新加载，这就是为什么结果会闪烁一秒钟。

在标准HTML中，表单是一个元素，用于通过其包含的输入收集数据。默认行为是，一旦输入数据并提交表单，浏览器将所有表单数据发送回服务器（POST请求）并重新加载响应。这是标准行为。如果您想在提交时运行JS函数，并在刷新页面时停止，则需要取消默认行为。通常这是通过返回false或e.preventDefault实现的（e是每个JS事件处理程序获得的事件对象）

大概是

<form id="calculator" onSubmit="return multiply()">
<input type="number" id="first">
*
<input type="number" id="second">
<input type="submit"> = <span id="answer"></span>
</form>

function multiply(e) {
    var x = document.getElementById("first").value;
    var y = document.getElementById("second").value;
    var z = x * y;
    document.getElementById("answer").innerHTML = z;
    e.preventDefault();
    return false;
}

对我来说更具语义意义。更好的是，不要将事件处理程序与HTML对齐

 <input type="number" id="first">
    *
    <input type="number" id="second">
    <button id="btnMultiply" type="button">=</button> = 
    <span id="answer"></span>

---

在标准HTML中，表单是一个元素，用于通过其包含的输入收集数据。默认行为是，一旦输入数据并提交表单，浏览器将所有表单数据发送回服务器（POST请求）并重新加载响应。这是标准行为。如果您想在提交时运行JS函数，并在刷新页面时停止，则需要取消默认行为。通常这是通过返回false或e.preventDefault实现的（e是每个JS事件处理程序获得的事件对象）

大概是

<form id="calculator" onSubmit="return multiply()">
<input type="number" id="first">
*
<input type="number" id="second">
<input type="submit"> = <span id="answer"></span>
</form>

function multiply(e) {
    var x = document.getElementById("first").value;
    var y = document.getElementById("second").value;
    var z = x * y;
    document.getElementById("answer").innerHTML = z;
    e.preventDefault();
    return false;
}

对我来说更具语义意义。更好的是，不要将事件处理程序与HTML对齐

 <input type="number" id="first">
    *
    <input type="number" id="second">
    <button id="btnMultiply" type="button">=</button> = 
    <span id="answer"></span>

---

在方法中使用return false，并在提交时修改以返回multiply（）。 这是剧本

function multiply() {
  var x = document.getElementById("first").value;
  var y = document.getElementById("second").value;
  var z = x * y;
  document.getElementById("answer").innerHTML = z;
  return (false);
}

这是修改后的HTML

<form id="calculator" onSubmit="return multiply()" method="post">
  <input type="number" id="first"> *
  <input type="number" id="second">
  <input type="submit"> = <span id="answer"></span>
</form>

*
= 

---

下面是JSFIDLE-

在方法中使用return false并在提交时修改以返回multiply（）。 这是剧本

function multiply() {
  var x = document.getElementById("first").value;
  var y = document.getElementById("second").value;
  var z = x * y;
  document.getElementById("answer").innerHTML = z;
  return (false);
}

这是修改后的HTML

<form id="calculator" onSubmit="return multiply()" method="post">
  <input type="number" id="first"> *
  <input type="number" id="second">
  <input type="submit"> = <span id="answer"></span>
</form>

*
= 

---

这是JSFIDLE-

以表单形式返回内容？以表单形式返回内容？

<form id="calculator" onSubmit="return multiply()" method="post">
  <input type="number" id="first"> *
  <input type="number" id="second">
  <input type="submit"> = <span id="answer"></span>
</form>