Count variable does not reset in javascript when re-initialized

Question

I've encountered an odd situation. I'm building a nice little Tic-Tac-Toe game in JS, and I can't figure out why the count variable will not reset when I init() a second time.

The first game works well; the second game count does not reset to 0 even though the var count resets in init().

Game rules: game starts with X and should always start with X. You'll note that the second game starts with O.

Would anyone care to take a look? Fiddle: http://jsfiddle.net/1ommcdxg/

var board;
var gameBoard;
var winners = [ 
                [0,1,2],
                [3,4,5],
                [6,7,8],
                [0,3,6],
                [1,4,7],
                [2,5,8],
                [0,4,8],
                [2,4,6]
];
var count;

var checkWin = function (a) {

    for (var i = 0; i < winners.length; i++) {

        if (gameBoard[winners[i][0]] === a && 
            gameBoard[winners[i][1]] === a && 
            gameBoard[winners[i][2]] === a) 
        {
            return a;
        };

    };

};

var gamePlay = function (ev) {

    console.log(ev);

    ev = ev || window.event; // browser compatibility
    var target = ev.target || ev.srcElement; //browser c...
    var choice = target.id; //sets a variable from the id
    choice = parseInt(choice.substring(1,2));

    // console.log(target);
    // console.log(choice);

    console.log("in gameplay " + count);

    if (count < 9) {

        if (count % 2 === 0) {

            target.innerHTML = "X";
            target.className = target.className + " x";
            gameBoard[choice] = "x";
            if (checkWin(gameBoard[choice])) {
                alert("X wins!");
                init();
            };

        } else {
            target.innerHTML = "O";
            target.className = target.className + " o";
            gameBoard[choice] = "o";
            if (checkWin(gameBoard[choice])) {
                alert("O wins!");
                init();
            };
        };

    } else {
        console.log("no more turns!");
    };

    count++;

};

var init = function () {

    gameBoard = new Array();
    xPlayer = [];
    oPlayer = [];
    count = 0;

    board = document.getElementById("board");

    if (board.hasChildNodes()) {
        board.removeChild(board.firstChild);
    };

    var b = document.createElement("b");
    board.appendChild(b);

    for (var i = 0; i < 9; i++) {
        var el = document.createElement("div");
        el.className = "square";
        el.id = "t" + i;
        b.appendChild(el);
        console.log(el);
        el.addEventListener('click', gamePlay);
    };

    console.log(count);

};

init();

Answer 1

Felix Kling is right, it's because of the count++ at the end of gamePlay function, it's called after init().

You may return from gamePlay function right after calling init(), to fix this issue.

 var board; var gameBoard; var winners = [ [0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6] ]; var count; var checkWin = function (a) { for (var i = 0; i < winners.length; i++) { if (gameBoard[winners[i][0]] === a && gameBoard[winners[i][1]] === a && gameBoard[winners[i][2]] === a) { return a; }; }; }; var gamePlay = function (ev) { console.log(ev); ev = ev || window.event; // browser compatibility var target = ev.target || ev.srcElement; //browser c... var choice = target.id; //sets a variable from the id choice = parseInt(choice.substring(1,2)); // console.log(target); // console.log(choice); console.log("in gameplay " + count); if (count < 9) { if (count % 2 === 0) { target.innerHTML = "X"; target.className = target.className + " x"; gameBoard[choice] = "x"; if (checkWin(gameBoard[choice])) { alert("X wins!"); init(); return; }; } else { target.innerHTML = "O"; target.className = target.className + " o"; gameBoard[choice] = "o"; if (checkWin(gameBoard[choice])) { alert("O wins!"); init(); return; }; }; } else { console.log("no more turns!"); }; count++; }; var init = function () { gameBoard = new Array(); xPlayer = []; oPlayer = []; count = 0; board = document.getElementById("board"); if (board.hasChildNodes()) { board.removeChild(board.firstChild); }; var b = document.createElement("b"); board.appendChild(b); for (var i = 0; i < 9; i++) { var el = document.createElement("div"); el.className = "square"; el.id = "t" + i; b.appendChild(el); console.log(el); el.addEventListener('click', gamePlay); }; console.log(count); }; init(); 

 #board { width: 400px; } .square { width: 100px; height: 100px; border: 2px solid #333; margin: 2px; float: left; text-align: center; } .x { background-color: blue; color: white; } .o { background-color: red; color: white; } 

 <body> <h1>Tic Tac Toe</h1> <div id="board"></div> </body> 

Answer 2

I found 2 issues in your code:

1. As you are not breaking your code execution once user wins( init() is being called) count++ will still execute
2. You need to remove the event listener once click event triggers or else your counter will still keep on increamenting but game will never finish

Try this snippet:

 var board; var gameBoard; var winners = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; var count; var checkWin = function(a) { for (var i = 0; i < winners.length; i++) { if (gameBoard[winners[i][0]] === a && gameBoard[winners[i][1]] === a && gameBoard[winners[i][2]] === a) { return a; } } }; var gamePlay = function(ev) { ev = ev || window.event; // browser compatibility var target = ev.target || ev.srcElement; //browser c... target.removeEventListener('click', gamePlay); var choice = target.id; //sets a variable from the id choice = parseInt(choice.substring(1, 2)); console.log("in gameplay " + count); if (count < 9) { if (count % 2 === 0) { target.innerHTML = "X"; target.className = target.className + " x"; gameBoard[choice] = "x"; if (checkWin(gameBoard[choice])) { alert("X wins!"); return init(); } } else { target.innerHTML = "O"; target.className = target.className + " o"; gameBoard[choice] = "o"; if (checkWin(gameBoard[choice])) { alert("O wins!"); return init(); } } } else { console.log("no more turns!"); } count++; }; var init = function() { gameBoard = []; xPlayer = []; oPlayer = []; count = 0; board = document.getElementById("board"); if (board.hasChildNodes()) { board.removeChild(board.firstChild); } var b = document.createElement("b"); board.appendChild(b); for (var i = 0; i < 9; i++) { var el = document.createElement("div"); el.className = "square"; el.id = "t" + i; b.appendChild(el); el.addEventListener('click', gamePlay); } console.log(count); }; init(); 

 #board { width: 400px; } .square { width: 100px; height: 100px; border: 2px solid #333; margin: 2px; float: left; text-align: center; } .x { background-color: blue; color: white; } .o { background-color: red; color: white; } 

 <h1>Tic Tac Toe</h1> <div id="board"></div>