Despite my efforts to toggle the value of the turn variable every time the if statement runs, I keep encountering the same outcome. It appears that turn consistently evaluates as 2.
Below is the code snippet in question:
$(function() {
var turn = 2;
if (turn == 1) {
$(".box").on("click", function() {
var $thisBox = $(this).children();
$thisBox.addClass("x").animate({
opacity: 1
}, 1000);
});
turn = 2;
} else if (turn == 2) {
$(".box").on("click", function() {
var $thisBox = $(this).children();
$thisBox.addClass("o").animate({
opacity: 1
}, 1000);
});
turn = 1;
} else {
document.write("Uh Oh");
}
});
I am perplexed by this recurring issue. Can anyone shed light on why this behavior persists?