頁面刷新表單提交（香草javascript）？

我正在學習有關JavaScript ....慢慢...並試圖測試我的知識有一個小計算器...頁面刷新表單提交（香草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和/或解釋我可以理解）。

來源

2016-04-14 Miranda

一些回報形式？ – uzaif

將「=」按鈕的類型更改爲「按鈕」，即設置類型=按鈕。在您的計算在客戶端運行後，「=」按鈕單擊頁面將提交給服務器。提交後頁面重新加載，這就是爲什麼你看到你的結果閃爍一秒鐘。

來源

2016-04-14 02:59:52

在標準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; 
    }

來源

2016-04-14 03:00:42 OJay

使用該方法返回false和修改提交給乘返回（）。這裏是腳本

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/

來源

2016-04-14 03:05:03 Anuraj

頁面刷新表單提交（香草javascript）？

回答

相關問題