Вопрос или проблема
Я пытаюсь показать вывод в элементе span, используя getElementById, но вывод отображается менее чем на секунду, а затем исчезает.
document.getElementById("stats").innerHTML =
"Мудрость: " + wisdom + "<br>" +
"Харизма: " + charisma + "<br>" +
"Интеллект: " + intellect + "<br>" +
"Сила: " + strength + "<br>" +
"Ловкость: " + dexterity + "<br>" +
"Телосложение: " + constitution;
<p>Общие характеристики с модификаторами: <span id="stats"></span></p>
Я пытался переместить span, отправить вывод в кнопку только для чтения (что работает, но обрезает большую часть вывода) и использовать скрипт в HTML. Никакой из этих способов не дает желаемого результата, так как я разместил span в элементе aside и хочу, чтобы пользователи видели результаты своего выбора там после нажатия кнопки отправки. Верхний блок кода находится в функции, которая запускается, когда пользователь нажимает кнопку отправки.
Ответ или решение
Для того чтобы вывести результаты в элемент span с использованием document.getElementById, при этом убедившись, что результат остается видимым после нажатия кнопки "Отправить", необходимо убедиться, что код выполнения не перезагружает страницу или не очищает содержимое элемента. Рассмотрим ваш код и предложим некоторые изменения.
Пример HTML-кода
<p>Total Stats with Modifiers: <span id="stats"></span></p>
<button id="submitBtn">Отправить</button>Пример JavaScript-кода
document.getElementById("submitBtn").addEventListener("click", function() {
// Получение значений характеристик
var wisdom = 10; // Пример значений
var charisma = 12;
var intellect = 15;
var strength = 8;
var dexterity = 14;
var constitution = 11;
// Вывод результатов в элемент с id "stats"
document.getElementById("stats").innerHTML =
"Мудрость: " + wisdom + "<br>" +
"Харизма: " + charisma + "<br>" +
"Интеллект: " + intellect + "<br>" +
"Сила: " + strength + "<br>" +
"Ловкость: " + dexterity + "<br>" +
"Конституция: " + constitution;
});Объяснение кода
-
Добавление обработчика события: Мы добавляем слушатель события
clickна кнопку "Отправить". Это гарантирует, что наш код выполняется только при нажатии на кнопку. -
Извлечение значений: В этом примере значения характеристик (например,
wisdom,charismaи т.д.) заданы статически. В реальном приложении вам, возможно, нужно будет извлекать эти значения из других интерактивных элементов, таких как текстовые поля или выпадающие списки. - Обновление содержимого элемента: С помощью
document.getElementById("stats").innerHTMLмы обновляем содержимое элементаspanс идентификаторомstats, добавляя необходимые данные.
Рекомендации
-
Убедитесь, что ваш код JavaScript загружается после того, как HTML-элементы были загружены. Для этого вы можете расположить
<script>внизу страницы перед закрывающим тегом</body>или использовать обработчик событияDOMContentLoaded. - Если ваш код после нажатия кнопки все еще очищается, проверьте, нет ли у вас формы, которая по умолчанию перезагружает страницу. Если это так, вы можете предотвратить поведение по умолчанию следующим образом:
document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault(); // предотвращаем перезагрузку страницы
// Ваш код
});Следуя этим рекомендациям, вы сможете безопасно выводить результаты в элемент span, и они будут оставаться видимыми после нажатия кнопки "Отправить".