フォーム提出時のページリフレッシュ（バニラジャバスクリプト）？

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

「=」ボタンのタイプを「ボタン」、すなわちタイプ=ボタンに変更します。クライアント側で計算が実行された後、 "="ボタンクリックページがサーバーに送信されます。送信後にページがリロードされるため、結果が1秒間点滅するのがわかります。

Answer 2

標準HTMLでは、フォームは、その入力を介してデータを収集するように設計された要素です。デフォルトの動作は、データが入力されてフォームが送信されると、ブラウザはそのフォームデータをすべてサーバーに戻し（POST要求）、レスポンスをリロードします。これは標準的な動作です。サブミット時に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; 
} 

のようなものが通常である（eは、すべてのJSのイベントハンドラは、取得した場合のオブジェクトである）虚偽またはe.preventDefaultを返す経由

です。個人的に私はデフォルトの振る舞いを変更しないようにしています。サーバーにデータを送信しておらず、純粋に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; 
    } 

Answer 3

使用）メソッドに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/