如何在HTML中多次复用JavaScript获取的用户输入变量？

核心思路：先把玩家输入的姓名保存为全局变量（或模块级变量），确保游戏全程可调用；再通过类选择器批量选中所有需要显示姓名的元素，统一更新内容。同时要处理表单提交的默认行为，避免页面刷新丢失数据。

你之前尝试的问题分析 #

1. 尝试1的问题：HTML中id是唯一标识，不能重复使用，getElementById只会返回第一个匹配元素，因此只有第一个<span>能显示内容。
2. 尝试2的问题：仅取了getElementsByClassName('player')[0]（第一个元素），未遍历所有带player类的元素，导致后续元素无更新。
3. 尝试3的问题：querySelectorAll('player')是错误的类选择器（类选择器需加.，正确写法是querySelectorAll('.player')），且错误使用src属性（这是图片专用属性），应使用textContent设置文本内容。

完整实现代码 #

HTML部分

<form id="form">
  <input type="text" id="userInput" placeholder="输入你的名字"/>
  <!-- 移除按钮内的a标签，通过表单逻辑控制跳转 -->
  <button type="submit" id="submitButton">确认名字</button>
</form> 

<div id="submit-input" class="event">
  <h2>你的名字是 <span class="player"></span> ?</h2>
  <p>谢谢你，<span class="player"></span>。</p> 
  <!-- 后续游戏中需显示名字的位置，统一添加player类 -->
  <p><span class="player"></span>，准备好开始游戏了吗？</p>
</div>

JavaScript部分（独立JS文件）

// 全局变量存储玩家姓名，游戏全程可直接调用
let playerName = '';

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('form');
  const userInput = document.getElementById('userInput');

  // 处理表单提交事件
  form.addEventListener('submit', function(e) {
    // 阻止表单默认提交行为，避免页面刷新丢失数据
    e.preventDefault();
    
    const inputValue = userInput.value.trim();
    if (inputValue) {
      playerName = inputValue;
      // 更新所有显示姓名的元素
      updatePlayerNameElements();
      // 跳转至确认区域
      window.location.href = '#submit-input';
    } else {
      alert('请输入你的名字！');
    }
  });

  // 批量更新所有带player类的元素
  function updatePlayerNameElements() {
    const nameElements = document.querySelectorAll('.player');
    nameElements.forEach(element => {
      element.textContent = playerName;
    });
  }
});

额外优化建议 #

• 若需刷新页面后仍保留玩家姓名，可使用localStorage持久化存储：

  // 保存姓名时
  localStorage.setItem('playerName', playerName);
  // 页面加载时读取
  playerName = localStorage.getItem('playerName') || '';
  if (playerName) {
    updatePlayerNameElements();
  }
  

• 游戏后续逻辑中，直接调用playerName变量即可使用玩家姓名，示例：

  // 游戏提示示例
  function showGameTip() {
    alert(`${playerName}，注意躲避敌人的攻击！`);
  }
  

内容的提问来源于stack exchange，提问作者ryebread