在 HTML 中不仅仅第一次使用 JavaScript 用户输入的变量

Question

我正在使用 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

尝试 2 的结果与尝试 1 完全相同。这次尝试之后，我记得 id 是唯一的，而且它们不能真正使用两次。因此，我尝试使用类而不是 id，但以类似的方式处理逻辑。第二次尝试如下所示。另外，在这次尝试中，我没有使用“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

在第二次尝试中，发生了相同的结果，其中仅显示了保存用户输入的变量的第一个实例。对于我的第三次尝试，我找到了另一个使用 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.log 语句中的代码甚至从未进入循环，因此，甚至没有显示用户输入变量 (

<h2> Your name is <span class = 'player'></span> ? </h2>

) 的第一个实例。我也研究过 .innerHTML，但也遇到了问题，因为它只会显示实际的 HTML 或显示空白，而不是显示用户输入。

解决这个问题的好方法是什么，因为似乎无论我尝试什么或可以搜索什么，HTML 只会显示用户输入的变量一次，而不是此后每次都显示。

非常感谢您，很抱歉问了一个很长的问题。

Answer 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>