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>