Question

我正在慢慢地学习Javascript ......并尝试用一个小计算器测试我的知识......

HTML：

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

使用Javascript：

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

我遇到的问题并不知道为什么在表单提交/按钮单击/返回键页面刷新？我究竟做错了什么？简单的Javascript中的答案是什么？我知道计算器可以达到一定程度，因为在刷新之前答案在页面上闪烁，但它确实如此。为什么呢？

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

Answer 1

在方法中使用return false并在submit上修改以返回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>

这是jsfiddle - https://jsfiddle.net/anuraj_p/sjvvod8q/

Answer 2

更改＆＃34; =＆＃34;的类型按钮到＆＃34;按钮＆＃34;即设置类型=按钮。在＆＃34; =＆＃34;在客户端运行计算后，按钮单击页面将提交给服务器。提交页面后会重新加载该页面，以便您看到结果闪烁一秒钟。

Answer 3

在标准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;
}

通常是什么意思。就个人而言，我尽量不改变默认行为。如果你没有向服务器发送数据，并且纯粹想要做一些JS功能，那么你真的不需要表单。像

这样的东西

HTML：

<input type="number" id="first">
*
<input type="number" id="second">
<button type="button" onclick="multiply()">=</button> = 
<span id="answer"></span>

JavaScript：

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

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

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

JavaScript：

document.getElementyId('btnMultiply').addEventListener('click',multiply);

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

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

3 个答案: