JavaScript开发井字棋(Tick Tack Toe)时玩家姓名无法更新问题求助

问题根本原因 #

• 表单提交默认触发页面刷新：你没有在startGame方法里阻止表单提交的默认行为，点击提交按钮后页面会重载，刚赋值的player0、player1变量会随着实例重置被清空，输入的姓名没有被留存。
• 未主动同步变量到DOM：你只把姓名存入了JS变量，没有手动修改页面上“Player one is”、“Player two is:”对应元素的文本内容，变量更新不会自动同步到页面展示。
• 获胜提示未引用姓名变量：获胜提示的代码里没有调用存储的player0/player1变量，只会展示固定的“won”文本。
• 工厂函数未暴露内部方法：如果你的game工厂函数没有把startGame、Initialize等方法对外暴露，外部调用时会失效。

修复步骤 #

1. 阻止表单默认提交刷新行为 #

修改startGame方法，新增阻止默认事件的逻辑，同时给姓名加默认值避免用户为空的情况：

const startGame = (e) => {
    // 阻止表单默认提交刷新页面
    e?.preventDefault();
    player0 = document.forms["form"]["player1"].value || "玩家1";
    player1 = document.forms["form"]["player2"].value || "玩家2";

    // 新增：同步更新页面上的玩家姓名展示
    document.querySelector("#player1-name").textContent = player0;
    document.querySelector("#player2-name").textContent = player1;

    clear();
    Initialize();
    return false;
}

同步修改HTML中表单的onsubmit属性，把事件对象传入方法：

<form onsubmit='return Newgame.startGame(event)' name='form' id='form'>

2. 给页面姓名展示元素加ID #

找到页面中“Player one is”、“Player two is:”对应的HTML标签，添加ID用于后续DOM操作，示例：

<h3>Player one is: <span id="player1-name"></span></h3>
<h3>Player two is: <span id="player2-name"></span></h3>

3. 修改获胜提示逻辑 #

在你判断玩家获胜的代码位置，替换原有固定提示文本，引用存储的玩家姓名变量：

// Current_player为0对应player0，为1对应player1
const winnerName = Current_player === 0 ? player0 : player1;
// #win-tip为你页面底部获胜提示的元素ID
document.querySelector("#win-tip").textContent = `${winnerName} won`;

4. 补全工厂函数的方法暴露逻辑 #

确保game工厂函数把需要外部调用的方法return出来，否则外部无法访问内部方法：

const game = () => {
    let Board = [[2,2,2], [2,2,2], [2,2,2]];
    let Current_player = 0;
    let player0 = "";
    let player1 = "";

    const startGame = (e) => {
        // 逻辑省略
    }
    const clear = () => {
        // 你的清空棋盘逻辑
    }
    const Initialize = () => {
        // 你的初始化逻辑
    }

    // 对外暴露内部方法
    return {
        startGame,
        Initialize
    }
}

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