使用对象工厂创建的Player1对象名称为空，点击按钮无法在游戏显示器中显示玩家名称的技术问题

你遇到的问题核心在于对象创建的时机不对：

当页面刚加载完成时，你就立刻执行了const Player1 = PlayerFactory(Player1TextBox.value.toString(), "X");，这时候用户还没在输入框里输入任何名字，Player1TextBox.value自然是空字符串。所以后续点击按钮调用getName()时，返回的就是这个初始的空值。

修复代码 #

只需要把创建Player1的逻辑移到点击事件的回调函数里，确保只有用户点击按钮时，才读取输入框的当前值并创建对象：

const Player1TextBox = document.querySelector("#player-1-textbox");
const Player2TextBox = document.querySelector("#player-2-textbox");
const startBtn = document.querySelector("#start-btn");
const gameDisplayer = document.querySelector("#game-displayer");

// 不要在这里提前创建Player1，而是在点击时创建
function displayName() {
  // 点击按钮时才读取输入框的值，创建Player对象
  const Player1 = PlayerFactory(Player1TextBox.value.toString(), "X");
  gameDisplayer.innerText = `${Player1.getName()}, it's your turn!`;
}

startBtn.addEventListener("click", displayName);

function PlayerFactory(name, sign) {
  const getName = () => {
    return name;
  };
  const getSign = () => {
    return sign;
  };
  return { getName, getSign };
}

额外优化建议 #

• 可以加个判断，如果用户没输入名字，给出提示（比如显示"Please enter player 1's name!"），避免显示空名称的提示。
• 如果需要保留Player1对象供后续使用，可以把它声明在全局作用域，在点击时重新赋值。

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