如何获取用户输入并存储到玩家对象/数组？Monopoly简化版开发问题

问题出在哪 #

1. 异步逻辑处理错误：getUserInput只是绑定了键盘事件，事件回调里的return input根本不会被外层函数捕获，所以player1和player2必然是undefined。
2. 提示被直接覆盖：setPlayers里连续修改message.innerHTML，玩家一的提示刚显示就被玩家二的内容顶掉，用户根本看不到第一个输入请求。
3. 重复绑定事件：两次调用getUserInput会给输入框绑定两次keydown事件，后续输入会触发多次回调，导致逻辑混乱。

修复后的代码 #

用Promise封装输入逻辑，配合async/await实现顺序等待输入：

// 把用户输入封装成Promise，等待回车触发
function getUserInput() {
  return new Promise((resolve) => {
    const inputBox = document.getElementById('user-input');
    
    const handleEnter = (event) => {
      if (event.key === 'Enter') {
        const name = inputBox.value.trim();
        if (name) { // 过滤空输入
          inputBox.value = '';
          // 用完就解绑事件，避免重复触发
          inputBox.removeEventListener('keydown', handleEnter);
          resolve(name);
        }
      }
    };
    
    inputBox.addEventListener('keydown', handleEnter);
  });
}

const messageEl = document.getElementById('game-message');
async function setPlayers() {
  // 先等待玩家一输入
  messageEl.innerHTML = '<p>请输入玩家一的名称：</p>';
  const player1 = await getUserInput();
  
  // 玩家一输入完成后，提示玩家二
  messageEl.innerHTML = '<p>请输入玩家二的名称：</p>';
  const player2 = await getUserInput();
  
  // 将玩家信息存入数组/对象
  const players = [player1, player2]; // 也可用对象：{ player1, player2 }
  console.log('已获取玩家信息：', players);
  
  // 给用户设置完成的反馈
  messageEl.innerHTML = `<p>玩家设置完成！<br>玩家一：${player1}<br>玩家二：${player2}</p>`;
}

setPlayers();

核心改进说明 #

• 用Promise把异步的输入操作转化为可等待的任务，async/await让代码逻辑和同步写法一样清晰，确保玩家一输入完成后才会显示玩家二的提示。
• 每次输入完成后移除事件监听，避免重复绑定导致的多次触发问题。
• 增加空输入过滤，防止用户提交无效的空名称。

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