javascript - JavaScript - 变量更改但 if 不适用

Question

'use strict'
let turn =0;
function addx(id){
    document.getElementById(id).innerHTML = '<p>x</p>';
    turn = 0;
}
function addo(id){
    document.getElementById(id).innerHTML = '<p>o</p>';
    turn = 1;
}
if(turn==1){
    document.getElementById('leftTop').addEventListener("click",function (){addx('leftTop')});
    document.getElementById('centerTop').addEventListener("click",function (){addx('centerTop')});
    document.getElementById('rightTop').addEventListener("click",function (){addx('rightTop')});
    document.getElementById('leftCenter').addEventListener("click",function (){addx('leftCenter')});
    document.getElementById('centerCenter').addEventListener("click",function (){addx('centerCenter')});
    document.getElementById('rightCenter').addEventListener("click",function (){addx('rightCenter')});
    document.getElementById('leftBottom').addEventListener("click",function (){addx('leftBottom')});
    document.getElementById('centerBottom').addEventListener("click",function (){addx('centerBottom')});
    document.getElementById('rightBottom').addEventListener("click",function (){addx('rightBottom')});
}
else{
    document.getElementById('leftTop').addEventListener("click",function (){addo('leftTop')});
    document.getElementById('centerTop').addEventListener("click",function (){addo('centerTop')});
    document.getElementById('rightTop').addEventListener("click",function (){addo('rightTop')});
    document.getElementById('leftCenter').addEventListener("click",function (){addo('leftCenter')});
    document.getElementById('centerCenter').addEventListener("click",function (){addo('centerCenter')});
    document.getElementById('rightCenter').addEventListener("click",function (){addo('rightCenter')});
    document.getElementById('leftBottom').addEventListener("click",function (){addo('leftBottom')});
    document.getElementById('centerBottom').addEventListener("click",function (){addo('centerBottom')});
    document.getElementById('rightBottom').addEventListener("click",function (){addo('rightBottom')});
}

我尝试井字游戏，我想在 x 和 o 之后转一圈，如果我声明“转”，它不会改变并且只打印 x 或仅打印 o。当我控制台时，我可以看到转向值已更改，但它仍然打印在 js 开头声明的转向功能。

标签： javascriptfunctiondom-events

Answer 1

turn更改值时不会执行编写的代码行。

'use strict'
let turn = 0;
function addx(id) {
  document.getElementById(id).innerHTML = '<p>x</p>';
  turn = 0;
  pleaseCallMe();
}
function addo(id) {
  document.getElementById(id).innerHTML = '<p>o</p>';
  turn = 1;
  pleaseCallMe();
}
function pleaseCallMe() {
  if (turn == 1) {
    document.getElementById('leftTop').addEventListener("click", function () { addx('leftTop') });
    document.getElementById('centerTop').addEventListener("click", function () { addx('centerTop') });
    document.getElementById('rightTop').addEventListener("click", function () { addx('rightTop') });
    document.getElementById('leftCenter').addEventListener("click", function () { addx('leftCenter') });
    document.getElementById('centerCenter').addEventListener("click", function () { addx('centerCenter') });
    document.getElementById('rightCenter').addEventListener("click", function () { addx('rightCenter') });
    document.getElementById('leftBottom').addEventListener("click", function () { addx('leftBottom') });
    document.getElementById('centerBottom').addEventListener("click", function () { addx('centerBottom') });
    document.getElementById('rightBottom').addEventListener("click", function () { addx('rightBottom') });
  }
  else {
    document.getElementById('leftTop').addEventListener("click", function () { addo('leftTop') });
    document.getElementById('centerTop').addEventListener("click", function () { addo('centerTop') });
    document.getElementById('rightTop').addEventListener("click", function () { addo('rightTop') });
    document.getElementById('leftCenter').addEventListener("click", function () { addo('leftCenter') });
    document.getElementById('centerCenter').addEventListener("click", function () { addo('centerCenter') });
    document.getElementById('rightCenter').addEventListener("click", function () { addo('rightCenter') });
    document.getElementById('leftBottom').addEventListener("click", function () { addo('leftBottom') });
    document.getElementById('centerBottom').addEventListener("click", function () { addo('centerBottom') });
    document.getElementById('rightBottom').addEventListener("click", function () { addo('rightBottom') });
  }
}
pleaseCallMe();