HTML-сброс после формы submit

Question

Сегодня я начал изучать JavaScript и хочу рассчитать два числа из текстового поля, используя JavaScript. Я хочу показать результат как HTML на самом веб-сайте. Когда я использую форму для отправки значений, она сохраняет сброс моего измененного HTML (секция результата показывает фактический результат на секунду, но сохраняет возврат к значению по умолчанию).

Этого не происходит при использовании кнопки. Но так как я хочу добавить переключатели для выбора из математической операции, я бы предпочел форму (я также не совсем уверен, как определить, какой радиокнопка проверяется через JS).

это мой HTML-форма

<form name="calcForm" onsubmit="calc(num1.value, num2.value)"> 
    <input type="text" id="num1"> 
    <input type="text" id="num2"> 
    <input type="submit" value="submit"> 
</form> 

Это мое решение-раздел (который сбрасывает при использовании формы)

<div id="calcRes" style="display:block;">Lorem ipsum dolor sit amet</div> 

Действительная функция JavaScript

function calc(num1, num2) { 
    var res = Number(num1)+Number(num2); 
    document.getElementById('calcRes').innerHTML = "Result is " + res; 
} 

Как Я сказал выше, результат отображается при использовании кнопки вместо «формы»

<button onclick="calc(num1.value, num2.value)">Calculate</button> 

Я хотел бы знать, почему измененный HTML переключается на стандартное, решение, как избежать этого, и если в моем коде есть «плохая практика». Я также пытался найти эту проблему, но ничего не могу найти. Я думаю, это просто проблема noobish, но, как я уже сказал, я полный новичок, поэтому, пожалуйста, будьте терпеливы со мной.

Answer 1

Форма отправляется и, следовательно, страница перезагружается. Чтобы этого избежать, вам нужно предотвратить подачу формы. В вашем случае

<form name="calcForm" onsubmit="calc(num1.value, num2.value); return false;"> 

должен сделать трюк.

Answer 2

Вы можете просто сжать в линии

document.getElementById("calcForm").reset(); 

после строки

document.getElementById('calcRes').innerHTML = "Result is " + res; 

Но вы должны добавить к вашему id="calcForm"<form> Tag.

Представление-действие должно понимать, как просто заканчивать все входные данные пользователя и что-то делать с ним. И после этого вам больше не нужны ваши входы, поэтому он будет удален автоматически. С помощью кнопки-кнопки форма не знает, что вы действительно сделали с вашим вводом. его просто нажмите кнопку. поэтому он оставит вход как есть.

Answer 3

<form> onsubmit Функция по умолчанию - отправить информацию о форме на сервер и сбрасывает страницу нажатием кнопки submit.

В приведенном выше коде при нажатии form submit вызывается функция calc, но она также сбрасывает страницу после вызова функции, поэтому модифицированный HTML переключается на значение по умолчанию.

Это поведение по умолчанию можно предотвратить, используя event.preventDefault(), который отменяет событие, если оно отменено. Добавив эту строку в начало, ваша функция calc будет препятствовать поведению по умолчанию.

Refer to MDN Docs для получения дополнительной информации о event.preventDefault()