Я создаю приложение для подсчета очков в баскетболе и хочу, чтобы названия команд были произвольными, поэтому я создал форму, чтобы вы могли отправлять новые имена. Однако, когда я нажимаю кнопку отправки, ничего не происходит, кроме белого мерцания на странице. Я просто открываю файл внутри хрома из своего файлового менеджера.
Вот что мне нужно переименовать:
<span class = "teamname" id = "1">Team 1</span>
Вот форма, которая у меня есть:
<form id = "myForm">
<input id = "name1" maxlength = "6" type = "text">
<button type = "submit" onclick = "updateFunction()">Update Team Names</button>
</form>
Наконец, вот мой JavaScript:
function updateFunction() {
var newname1 = document.getElementById("myForm").elements.namedItem("name1").value;
document.getElementById('1').innerHTML = newname1;
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


HTML-формы ожидают атрибут action, который указывает, куда следует отправлять данные формы, например.
<form action = "/login"></form>
HTML5 не требует, чтобы вы указывали action, но если вы не укажете его, по умолчанию будет указана та же страница, на которой вы находитесь. Итак, в вашем случае отправка формы в основном перезагружает страницу. Чтобы заблокировать такое поведение, вы можете использовать ложное значение javascript.
Также лучше установить логику отправки в элементе формы, а не в кнопке отправки.
Итак, вот как вы должны изменить свой код:
<form id = "myForm" action = "javascript:void(0)" onsubmit = "updateFunction()">
<input id = "name1" maxlength = "6" type = "text">
<button type = "submit">Update Team Names</button>
</form>
Тег кнопки должен располагаться за пределами HTML-формы. Итак, форма должна выглядеть так:
<form id = "myForm">
<input id = "name1" maxlength = "6" type = "text">
</form>
<button type = "submit" onclick = "updateFunction()">Update Team Names</button>