CODEWITHSUNDEEP
javascriptfunctioncall
Elay Gelbart
Elay Gelbart

Reputation: 88

the function run more times than it should

'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.

what i wanted is every click is to add 1 to each count when it is his turn. this is tictacteo game, every click is should replace the event listener.

the function of x somehow called 4 times on the third click, what i get "on board" is 2x and 1o but the countx = 4

Upvotes: 1

Views: 35

Answers (1)

AaronJ
AaronJ

Reputation: 1170

addEventListener adds a new additional event listener every time it's run. Use just one event listener instead of trying to replace the old one to make this work better. Replacing them is unnecessary.

The turn variable already tracks whose turn it is. So you can use something like the following.

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();
}

Upvotes: 1

Related Questions