Обновление страницы на форме submit (vanilla javascript)?

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

Проблема, с которой я столкнулся, и не знаю, почему в форме submit/кнопка click/return key обновляет страницу? Что я делаю не так? Каков ответ в простом Javascript. Я знаю, что калькулятор работает до определенной точки, потому что на странице мигает ответ, прежде чем он обновится, но все же это произойдет. Зачем?

(Я знаю, что этот вопрос задан раньше, но я не мог найти ответ на простом Javascript и/или с объяснением, которое я мог понять).

Answer 1

Изменить тип кнопки «=» на «кнопку», то есть установить тип = кнопку. На странице «=» кнопка «щелчок» отправляется на сервер после того, как ваши расчеты выполняются на стороне клиента. Страница перезагружается после отправки, поэтому вы видите, что ваш результат мигает на секунду.

Answer 2

В стандартном HTML форма представляет собой элемент, который предназначен для сбора данных через содержащиеся в нем входы. Поведение по умолчанию - это когда данные вводятся и форма отправляется, браузер отправляет все данные этой формы на сервер (запрос POST) и перезагружает ответ. Это стандартное поведение. Если вы хотите запустить JS-функцию при отправке и остановитесь, если после обновления страницы вам нужно отменить поведение по умолчанию. Обычно это происходит через возвращение ложных или e.preventDefault (е является объектом события, который получает каждый обработчик события 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; 
    } 

Answer 3

Использование возвращение ложным в методе и модифицировать на представить, чтобы вернуться многократно(). Вот сценарий

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/