函数运行的次数超出了应有的次数

Question

'use strict'
let turn =1;
let countx = 0;
let counto = 0;
function addx(id){
    document.getElementById(id).innerHTML = '<p>x</p>';
    turn = 0;
    newclick();
    countx++;
    checkWin();
}
function addo(id){
    document.getElementById(id).innerHTML = '<p>o</p>';
    turn = 1;
    newclick();
    counto++;
    checkWin();
}
function checkWin(){
    if(countx==3||counto==3){
        alert('you win');
    }
 }
function newclick(){
    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')});
    }
}
newclick();

on the first click - countx = 1; counto=0.
on the second click - countx = 2; counto=1.
on the third click - countx = 4; counto=3.


what i want to get is:
first click countx =1;counto=0.
second click countx=1;counto=1.
third click countx=2;counto1.

我想要的是每次点击都在轮到他时为每个计数加 1。这是 tictacteo 游戏，每次点击都应该替换事件侦听器。

x 的函数在第三次单击时以某种方式调用了 4 次，我得到的“板载”是 2x 和 1o，但 countx = 4

Answer 1

addEventListener 在每次运行时添加一个新的附加事件侦听器。只使用一个事件监听器而不是试图替换旧的监听器来使这项工作更好。无需更换。

turn 变量已经跟踪轮到谁了。所以你可以使用类似下面的东西。

function genericClick(id) {
    if (turn == 1) {
        // add an x
        document.getElementById(id).innerHTML = '<p>x</p>';
        turn = 0;
        countx++;
    } else {
        document.getElementById(id).innerHTML = '<p>o</p>';
        turn = 1;
        counto++;
    }
    checkWin();
}

函数运行的次数超出了应有的次数

the function run more times than it should

javascript

function

call

函数 运行 的次数超出了应有的次数

the function run more times than it should

javascript

function

call

函数运行的次数超出了应有的次数