How logical/boolean operators work in an if else if statement?

Question

I'm building a tic tac toe game and I'm trying to use an if else if statement for my win conditions. I've tried a couple different methods for My conditions. Here's all my coding for it:

var Box1=document.getElementById("box1"); //getting the grid spots and putting them into variables
var Box2=document.getElementById("box2");
var Box3=document.getElementById("box3");
var Box4=document.getElementById("box4");
var Box5=document.getElementById("box5");
var Box6=document.getElementById("box6");
var Box7=document.getElementById("box7");
var Box8=document.getElementById("box8");
var Box9=document.getElementById("box9");
var a1=document.getElementById("box1").innerHTML; //getting the innerHTML of the grid spots to check for x or o later
var a2=document.getElementById("box2").innerHTML;
var a3=document.getElementById("box3").innerHTML;
var a4=document.getElementById("box4").innerHTML;
var a5=document.getElementById("box5").innerHTML;
var a6=document.getElementById("box6").innerHTML;
var a7=document.getElementById("box7").innerHTML;
var a8=document.getElementById("box8").innerHTML;
var a9=document.getElementById("box9").innerHTML;
var playerchar="x"; //setting the first player as x

Box1.addEventListener("click", box1); //adding click event for when grid spot 1, 1 is clicked
function box1() {
	Box1.innerHTML=playerchar; //Setting the innerHTML of the clicked grid spot 
	Box1.removeEventListener("click", box1);// removing click event
	checkwin(); // check for a win condition
	if(playerchar=="x") { // 
		playerchar="o"; //if the last turn was an x then change it to o.
	}
	else if(playerchar=="o") {
		playerchar="x"; //if the last turn was o then change it to x.
	}
}

Box2.addEventListener("click", box2);
function box2() {
	Box2.innerHTML=playerchar;
	Box2.removeEventListener("click", box2);
	checkwin();
	if(playerchar=="x") {
		playerchar="o";
	}
	else if(playerchar=="o") {
		playerchar="x";
	}
	
}

Box3.addEventListener("click", box3);
function box3() {
	Box3.innerHTML=playerchar;
	Box3.removeEventListener("click", box3);
	checkwin();
	if(playerchar=="x") {
		playerchar="o";
	}
	else if(playerchar=="o") {
		playerchar="x";
	}
}

Box4.addEventListener("click", box4);
function box4() {
	Box4.innerHTML=playerchar;
	Box4.removeEventListener("click", box4);
	checkwin();
	if(playerchar=="x") {
		playerchar="o";
	}
	else if(playerchar=="o") {
		playerchar="x";
	}
}

Box5.addEventListener("click", box5);
function box5() {
	Box5.innerHTML=playerchar;
	Box5.removeEventListener("click", box5);
	checkwin();
	if(playerchar=="x") {
		playerchar="o";
	}
	else if(playerchar=="o") {
		playerchar="x";
	}
}

Box6.addEventListener("click", box6);
function box6() {
	Box6.innerHTML=playerchar;
	checkwin();
	Box6.removeEventListener("click", box6)
	if(playerchar=="x") {
		playerchar="o";
	}
	else if(playerchar=="o") {
		playerchar="x";
	}
}

Box7.addEventListener("click", box7);
function box7() {
	Box7.innerHTML=playerchar;
	Box7.removeEventListener("click", box7);
	checkwin();
	if(playerchar=="x") {
		playerchar="o";
	}
	else if(playerchar=="o") {
		playerchar="x";
	}
}

Box8.addEventListener("click", box8);
function box8() {
	Box8.innerHTML=playerchar;
	Box8.removeEventListener("click", box8);
	checkwin();
	if(playerchar=="x") {
		playerchar="o";
	}
	else if(playerchar=="o") {
		playerchar="x";
	}
}

Box9.addEventListener("click", box9);
function box9() {
	Box9.innerHTML=playerchar;
	Box9.removeEventListener("click", box9);
	checkwin();
	if(playerchar=="x") {
		playerchar="o";
	}
	else if(playerchar=="o") {
		playerchar="x";
	}
}
function checkwin() {
	if(a1==a2 && a1==a3 && a1=="x" || a1=="o") { //check for win with top row
		quit(); //function for what happens when someone wins
	}
	else if(a4==a5 && a4==a6 && a4=="x" || a4=="o") { // check for win with second row
		quit();
	}
	else if(a7==a8 && a7==a9 && a7=="x" || a7=="o") { //check for win with third row
		quit();
	}
	else if(a1==a4 && a1==a7 && a1=="x" || a1=="o") {// check for win with first column
		quit();
	}
	else if(a2==a5 && a2==a8 && a2=="x" || a2=="o") {//check for win with second column
		quit();
	}
	else if(a3==a6 && a3==a9 && a3=="x" || a3=="o") { // check for win with third column
		quit();
	}
	else if((a1 == 'x' || a1 == 'o') && a1==a5 || a1==a9) { //check for win from top left to bottom right
    		quit();
	}
	else if((a3==a5 && a3==a7) && (a3=="x" || a3=="o")) { // check for win from top right to bottom left
		quit();
	}
}
function quit() {
	alert("Someone won");
}

#container {
	cell-spacing: 0px;
	border-spacing: 0px;
	margin: 30px ;
	border-collapse: separate;
}
table tr td {
	width: 40px;
	height: 40px;
	border: 2px solid black;
	font-size: 35px;
	text-align: center;
	cursor: pointer;
}
#container tr:first-child td
    border-top: none
}

#container tr:last-child td
    border-bottom: none
}

#container tr td:first-child
    border-left: none;
}

#container tr td:last-child
    border-right: none;
}

	<title>TicTacToe</title>
</head>
<body>
	<h2> Player 1 is x</h2>
	<h2>Player 2 is o</h2>
	<div id="container">
		<table>
			<tr>
				<td id="box1"></td>
				<td id="box2"></td>
				<td id="box3"></td>
			</tr>
			<tr>
				<td id="box4"></td>
				<td id="box5"></td>
				<td id="box6"></td>
			</tr>
			<tr>
				<td id="box7"></td>
				<td id="box8"></td>
				<td id="box9"></td>
			</tr>
		</table>
	</div>
</body>
<script type="text/javascript" src="TicTacToe.js"></script>
</html>

So when a player clicks on one of the td's that haven't been clicked yet, it takes the player character and puts it into the innerHTML of the td. Then changes the player character to the opposing value. How can I make the checkwin() function check all 8 possible win conditions for x or o.

Answer 1

I figured out what I was doing wrong. My a1-a9 variables were getting innerHTML before being clicked on, so all my win condition variables were null. Just had to move the variables to the checkwin() function to refresh them.