Как заставить кнопку отправки формы в HTML активировать функцию JavaScript?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с JavaScript и HTML. Я пытаюсь сделать так, чтобы при нажатии на кнопку отправки формы запускалась функция JavaScript, которая должна обновлять текст на странице. Вот мой код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <script>
        function обновитьЗарплату() {
            var зарплата = document.forms["формаРасчета"]["зарплата"].value;
            document.getElementById("результат").innerHTML = зарплата;
            return false;
        }
    </script>
    <title>Вопрос</title>
</head>
<body>
    <form id="формаРасчета" onsubmit="return обновитьЗарплату();">
        Зарплата: 
        <input type="text" name="зарплата" value="50000" required>
        <input type="submit" value="Рассчитать">
    </form>
    <p id="результат">Здесь должна появиться введенная зарплата</p>
</body>
</html>

Почему-то при нажатии на кнопку “Рассчитать” текст в параграфе не меняется. Я уже несколько часов пытаюсь понять, в чем проблема. Может кто-нибудь подсказать, что я делаю не так? Заранее спасибо за помощь!

2

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

function обновитьЗарплату(e) {
e.preventDefault();
var зарплата = document.forms[‘формаРасчета’][‘зарплата’].value;
document.getElementById(‘результат’).innerHTML = зарплата;
}

и в html просто передавай событие:

так должно сработать без лишних телодвижений. удачи с кодом!

3

Проблема в том, что у тебя форма отправляется, перезагружая страницу. Чтобы этого избежать, используй event.preventDefault() в обработчике. Вот как можно исправить:

function обновитьЗарплату(event) {
    event.preventDefault();
    var зарплата = document.forms['формаРасчета']['зарплата'].value;
    document.getElementById('результат').innerHTML = зарплата;
}

И в HTML измени на:

<form id='формаРасчета' onsubmit='обновитьЗарплату(event);'>

Это должно решить твою проблему. Удачи в кодинге!