JavaScript井字棋开发中turn变量变更但if分支不生效问题

• 你的if(turn==1)/else分支逻辑仅在JS脚本初始化加载时执行1次，事件绑定完成后就不会再重新判断turn值切换绑定函数，哪怕后续turn变量更新，已经绑定的点击事件也不会自动变更
• 现有逻辑中addx把turn设为0、addo把turn设为1的规则也和交替落子的需求相反：下完X后应该轮到O，下完O后应该轮到X

'use strict'
// turn=1代表轮到X落子，turn=0代表轮到O落子，初始值可自行调整
let turn = 1;
// 所有格子共用同一个点击处理函数
function handleChessClick(e) {
    const targetCell = e.currentTarget;
    // 已落子的格子不响应二次点击，符合井字棋规则
    if(targetCell.innerHTML.trim() !== '') return;
    if(turn === 1) {
        targetCell.innerHTML = '<p>x</p>';
        // 落子完成切换到对方回合
        turn = 0;
    } else {
        targetCell.innerHTML = '<p>o</p>';
        turn = 1;
    }
}
// 批量绑定所有格子的点击事件，避免重复编写冗余代码
const cellIdList = [
    'leftTop', 'centerTop', 'rightTop',
    'leftCenter', 'centerCenter', 'rightCenter',
    'leftBottom', 'centerBottom', 'rightBottom'
];
cellIdList.forEach(id => {
    document.getElementById(id).addEventListener('click', handleChessClick);
})

• 点击触发时才判断当前落子方，turn变量更新后会自动在下一次点击生效，不需要动态解绑、重新绑定事件
• 复用事件处理逻辑，代码量仅为原有版本的三分之一，后续迭代维护成本更低
• 新增重复落子拦截逻辑，符合正常井字棋的交互规则

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