Используйте переменную, введенную пользователем в JavaScript, чаще, чем в первый раз в HTML

Я делаю игру с использованием HTML/CSS и JavaScript и хочу, чтобы игроки вводили свое имя в поле ввода текста. После того, как они введут свое имя, я хотел бы сохранить это имя как переменную и постоянно использовать его на протяжении всей игры, а не один раз. Для ясности я использую отдельный файл для всего JavaScript, потому что мне нравится, когда JavaScript отделен от моего HTML, и я бы предпочел не использовать тег <script>, хотя, если будет проще использовать тег <script>, то, думаю, со мной все будет в порядке. с этим.

Пример того, чего я хотел бы достичь:

  • Игрок вводит свое имя, скажем, Abc.
  • Игра сохраняет имя Abc и на протяжении всей остальной игры использует этот пользовательский ввод (Abc), чтобы напрямую обращаться к игроку: «Привет, Abc». или «Abc, это был хороший выбор» и т. д.

Сначала я создал функцию в своем файле JavaScript, где объявил переменную, которая будет получать вводимые пользователем данные в моем HTML. Другая переменная будет использоваться для вставки себя в HTML и отображения введенного имени игрока.

После этого я создал оператор if, который проверял, ввел ли игрок что-нибудь, и если да, то результат и ввод будут равны друг другу. Затем я закодировал кнопку отправки для этого ввода. В этой попытке имя, введенное пользователем, отображалось только в первом экземпляре внутри <h2> Your name is <span id = 'resultingInput'></span> ? </h2>. Однако во второй раз, когда я попробовал использовать тот же пользовательский ввод, он был пуст. <p>Thank you, <span id = 'resultingInput'></span> . </p> В следующем разделе игры ввод также не показывался. Только самое первое использование введенной пользователем переменной отображало то, что на самом деле ввел пользователь, остальные были просто пустыми. Эта первая попытка показана ниже:

HTML-попытка 1

<form id = 'form'>
   <input type = 'text' id = 'userInput'/>


   <button type = 'submit' id = 'submitButton'> 
      <a href = '#submit-input'> enter this name </a>
    </button> 

 </form> 

<div id = 'submit-input' class = 'event'>
   <h2> Your name is <span id = 'resultingInput'></span> ? </h2>
    
   <p>Thank you, <span id = 'resultingInput'></span> . </p> 
     
</div>

JavaScript-попытка 1

$(document).ready(function() {
  function getName() {

    var input = document.getElementById('userInput').value;
    var result = document.getElementById('resultingInput');

        if (input.length > 0) {
            result.textContent = input;
        }


   }


    var submit = document.getElementById('submitButton');
    submit.addEventListener('click', getName); 

    getName();

});

Результат попытки 1 Изображение результата кода со словами «Вас зовут Abc? Спасибо. ,

Попытка 2 дала те же результаты, что и попытка 1. После этой попытки я вспомнил, что идентификаторы уникальны и что их нельзя использовать дважды. Итак, я попытался использовать классы вместо идентификаторов, но по логике аналогичен. Эта вторая попытка показана ниже. Кроме того, вместо использования «resultingInput» и «result» в этой попытке я использовал «player» и «playerName», чтобы различать две попытки. Извините за путаницу.

HTML-попытка 2

<form id = 'form'>
   <input type = 'text' id = 'userInput'/>


   <button type = 'submit' id = 'submitButton'> 
      <a href = '#submit-input'> enter this name </a>
    </button> 

 </form> 

<div id = 'submit-input' class = 'event'>
   <h2> Your name is <span class = 'player'></span> ? </h2>
    
   <p>Thank you, <span class = 'player'></span> . </p> 
     
</div>

Попытка JavaScript 2

$(document).ready(function() {
  function getName() {

    var input = document.getElementById('userInput').value;
    var playerName = document.getElementsByClassName('player')[0];

        if (input.length > 0) {
            playerName.textContent = input;

        }

   }
    var submit = document.getElementById('submitButton');
    submit.addEventListener('click', getName); 

    getName();

});

Результат попытки 2 Изображение результата кода со словами «Вас зовут Abc? Спасибо. ,

Во второй попытке были получены те же результаты: был показан только первый экземпляр переменной, которая сохранила ввод пользователя. В своей третьей попытке я нашел другой ответ, который будет использовать querySelectorAll. HTML остался прежним, но для JavaScript третьей попытки я сделал следующее.

Попытка JavaScript 3 (HTML остался прежним при попытке 2)

$(document).ready(function() {
  function getName() {

    var input = document.getElementById('userInput').value;
    const playerName = document.querySelectorAll('player');

    for (let i = 0; i < playerName.length; i++) {
       playerName[i].src = input;

   }

    var submit = document.getElementById('submitButton');
    submit.addEventListener('click', getName); 

    getName();

});

Результат попытки 3 Изображение результата кода со словами «Ваше имя? Спасибо. ,

Это была моя последняя попытка, поскольку с помощью операторов console.info я обнаружил, что код даже не попал внутрь цикла, и поэтому не был показан даже первый экземпляр входной переменной пользователя (<h2> Your name is <span class = 'player'></span> ? </h2>). Я также изучил .innerHTML, но также столкнулся с проблемами, поскольку он просто отображает фактический HTML или отображается пустым, а не отображает пользовательский ввод.

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

Большое спасибо и извините за длинный вопрос.

Глядя на вторую попытку, я задаюсь вопросом, почему вы не указали элемент массива перед установкой значения. ИЕ: if (input.length > 0) { for (let i = 0; i < playerName.length; i++) { playerName[i].textContent = input; } }

5w3rv0 19.04.2024 20:53
resultingInput идентификаторы должны быть уникальными, и в первом примере у вас есть более одного элемента с этим идентификатором. В третьей попытке вы пытаетесь выбрать элементы по классу, используя querySelectorAll, но вам нужно добавить точку, чтобы получить доступ к элементам по классу, как здесь document.querySelectorAll('.player');
Chris G 19.04.2024 21:03

В зависимости от того, что вы ищете, я думаю, LocalStorage может быть тем, что вы ищете: Developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

ControlAltDel 19.04.2024 21:05
Поведение ключевого слова "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
3
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сохранить глобальное состояние в JavaScript.

Всякий раз, когда поле имени повторно отправляется, просто выполните повторную обработку.

Примечание. Если вы собираетесь использовать jQuery, избегайте использования addEventListener, getElementById, querySelectorAll и прямого изменения элементов DOM. Если вы хотите сделать это, вам, вероятно, не понадобится использовать jQuery.

const state = {
  username: null
};

$('#input-form').on('submit', handleSubmit);

function handleSubmit(e) {
  e.preventDefault(); // Stop page navigation
  updateState({
    username: getFormField($(e.target), 'username').value
  });
  render();
}

function getFormField($form, name) {
  return $form.serializeArray().find(field => field.name === name);
}

function updateState(updates) {
  $.extend(state, updates);
}

function render() {
  $('.player').each(function() {
    $(this).text(state.username);
  });
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id = "input-form">
  <input type = "text" name = "username" placeholder = "Enter username" />
  <button type = "submit">Submit</button>
</form>
<div class = "event">
  <h2>Your name is <span class = "player"></span>?</h2>
  <p>Thank you, <span class = "player"></span>.</p>
</div>

Вот версия без jQuery для сравнения:

const state = {
  username: null
};

document.querySelector('#input-form')
  .addEventListener('submit', handleSubmit);

function handleSubmit(e) {
  e.preventDefault(); // Stop page navigation
  updateState({
    username: getFormField(e.target, 'username').value
  });
  render();
}

function getFormField(form, name) {
  return form.elements[name];
}

function updateState(updates) {
  deepAssign(state, updates);
}

function render() {
  document.querySelectorAll('.player').forEach(player => {
    player.textContent = state.username;
  });
}

function deepAssign(target, source) {
  Object.keys(source).forEach(key => {
    if (isObject(target[key]) && isObject(source[key])) {
      deepAssign(target[key], source[key]);
    } else {
      target[key] = source[key];
    }
  });
  return target;
}

function isObject(item) {
  return item && typeof item === 'object' && !Array.isArray(item);
}
<form id = "input-form">
  <input type = "text" name = "username" placeholder = "Enter username" />
  <button type = "submit">Submit</button>
</form>
<div class = "event">
  <h2>Your name is <span class = "player"></span>?</h2>
  <p>Thank you, <span class = "player"></span>.</p>
</div>

Мне было интересно, как вы встроили код-бегун в свой ответ. Это что-то, что включается, когда вы автоматически отправляете ответ javascript/html или что-то еще? Если он является внешним, мы будем признательны за указание на документацию для включения его в любые ответы, которые я предоставляю.

5w3rv0 19.04.2024 21:08

@ 5w3rv0 это называется «фрагмент», и вы можете добавить его, нажав кнопку «фрагмент» справа от кнопки «загрузить изображение».

Mr. Polywhirl 19.04.2024 21:14

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