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

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

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

<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;
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
38
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

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

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

Другие вопросы по теме