JavaScript井字棋游戏：添加玩家时input参数值为空的问题求助

问题根源 #

你在绑定点击事件时使用了addPlayer.bind(this, char, input.value)，这里的input.value是事件绑定瞬间的取值——此时输入框还没有输入内容，所以传入addPlayer的姓名始终是空字符串。绑定操作只会执行一次，不会在点击时重新获取输入值。

修复方案 #

修改事件绑定逻辑，不在绑定阶段传递输入值，而是在点击触发时实时获取输入框的当前内容：

1. 修改事件绑定代码
   把绑定参数里的input.value换成input元素本身，这样在点击时可以直接访问到最新的输入值：

// 原代码
// div.addEventListener('click', addPlayer.bind(this, char, input.value));

// 修改后
div.addEventListener('click', addPlayer.bind(this, char, input));

2. 更新addPlayer函数
   在函数内部获取输入框的实时值，还可以增加非空校验避免无效输入：

const addPlayer = (character, inputEl, event) => {
    // 获取实时输入的姓名，去除首尾空格
    const playerName = inputEl.value.trim();
    
    // 校验姓名是否为空
    if (!playerName) {
        alert('请输入玩家姓名');
        return;
    }

    if (divs.length !== 0) {
        players.push([character, playerName]);
        menu.removeChild(event.target);
        inputEl.value = '';
    } else init2();
};

额外优化建议 #

• 移除已选择的字符div后，getElementsByClassName返回的是动态集合，会自动更新divs的长度，无需手动处理
• 可以给已选择的字符div添加禁用样式，避免重复点击误操作
• 限制玩家数量（比如井字棋最多2人），防止添加过多无效玩家

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