Как я могу установить текст элемента HTML для отправки текста формы?

Question

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

Вот что мне нужно переименовать:

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

Answer 1

Тег кнопки должен находиться за пределами формы HTML.Итак, форма должна выглядеть так:

 <form id="myForm">
 <input id="name1" maxlength="6" type="text">
 </form>
 <button type="submit" onclick="updateFunction()">Update Team Names</button>

Answer 2

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>