<html>
<body>
<style>
td {
border: 1px solid black;
height: 50px;
width: 50px;
}
</style>
<script>
let O1 = false;
let X1 = false;
let O2 = false;
let X2 = false;
let O3 = false;
let X3 = false;
let O4 = false;
let X4 = false;
let O5 = false;
let X5 = false;
let O6 = false;
let X6 = false;
let O7 = false;
let X7 = false;
let O8 = false;
let X8 = false;
let O9 = false;
let X9 = false;
let turn = 0;
let XWinNum = 0
let OWinNum = 0
function Xon1() {
if (O1 === false && X1 === false && turn === 0) {
document.getElementById("1").innerHTML = 'X';
X1 = true;
turn++
setTimeout(compMove, 1000);
}
}
function Xon2() {
if (O2 === false && X2 === false && turn === 0) {
document.getElementById("2").innerHTML = 'X';
X2 = true;
turn++
setTimeout(compMove, 1000);
}
}
function Xon3() {
if (O3 === false && X3 === false && turn === 0) {
document.getElementById("3").innerHTML = 'X';
X3 = true;
turn++
setTimeout(compMove, 1000);
}
}
function Xon4() {
if (O4 === false && X4 === false && turn === 0) {
document.getElementById("4").innerHTML = 'X';
X4 = true;
turn++
setTimeout(compMove, 1000);
}
}
function Xon5() {
if (O5 === false && X5 === false && turn === 0) {
document.getElementById("5").innerHTML = 'X';
X5 = true;
turn++
setTimeout(compMove, 1000);
}
}
function Xon6() {
if (O6 === false && X6 === false && turn === 0) {
document.getElementById("6").innerHTML = 'X';
X6 = true;
turn++
setTimeout(compMove, 1000);
}
}
function Xon7() {
if (O7 === false && X7 === false && turn === 0) {
document.getElementById("7").innerHTML = 'X';
X7 = true;
turn++
setTimeout(compMove, 1000);
}
}
function Xon8() {
if (O8 === false && X8 === false && turn === 0) {
document.getElementById("8").innerHTML = 'X';
X8 = true;
turn++
setTimeout(compMove, 1000);
}
}
function Xon9() {
if (O9 === false && X9 === false && turn === 0) {
document.getElementById("9").innerHTML = 'X';
X9 = true;
turn++
setTimeout(compMove, 1000);
}
}
function compMove() {
checkForWin()
if (turn === 1) {
if(X1 === true && X2 === true && X3 === false && O3 === false && turn === 1) {
document.getElementById("3").innerHTML = 'O';
O3 = true
turn--
}
if(X1 === true && X3 === true && X2 === false && O2 === false && turn === 1) {
document.getElementById("2").innerHTML = 'O';
O2 = true
turn--
}
if(X2 === true && X3 === true && X1 === false && O1 === false && turn === 1) {
document.getElementById("1").innerHTML = 'O';
O1 = true
turn--
}
if(X3 === true && X4 === true && X5 === false && O5 === false && turn === 1) {
document.getElementById("5").innerHTML = 'O';
O5 = true
turn--
}
if(X3 === true && X5 === true && X7 === false && O7 === false && turn === 1) {
document.getElementById("7").innerHTML = 'O';
O7 = true
turn--
}
if(X4 === true && X5 === true && X6 === false && O6 === false && turn === 1) {
document.getElementById("6").innerHTML = 'O';
O6 = true
turn--
}
if(X7 === true && X8 === true && X9 === false && O9 === false && turn === 1) {
document.getElementById("9").innerHTML = 'O';
O9 = true
turn--
}
if(X7 === true && X9 === true && X8 === false && O8 === false && turn === 1) {
document.getElementById("8").innerHTML = 'O';
O8 = true
turn--
}
if(X8 === true && X9 === true && X7 === false && O7 === false && turn === 1) {
document.getElementById("7").innerHTML = 'O';
O7 = true
turn--
}
if(X1 === true && X4 === true && X7 === false && O7 === false && turn === 1) {
document.getElementById("7").innerHTML = 'O';
O7 = true
turn--
}
if(X1 === true && X7 === true && X4 === false && O4 === false && turn === 1) {
document.getElementById("4").innerHTML = 'O';
O4 = true
turn--
}
if(X7 === true && X4 === true && X1 === false && O1 === false && turn === 1) {
document.getElementById("1").innerHTML = 'O';
O1 = true
turn--
}
if(X2 === true && X5 === true && X8 === false && O8 === false && turn === 1) {
document.getElementById("8").innerHTML = 'O';
O8 = true
turn--
}
if(X2 === true && X8 === true && X5 === false && O5 === false && turn === 1) {
document.getElementById("5").innerHTML = 'O';
O5 = true
turn--
}
if(X5 === true && X8 === true && X2 === false && O2 === false && turn === 1) {
document.getElementById("2").innerHTML = 'O';
O2 = true
turn--
}
if(X3 === true && X6 === true && X9 === false && O9 === false && turn === 1) {
document.getElementById("9").innerHTML = 'O';
O9 = true
turn--
}
if(X3 === true && X9 === true && X6 === false && O6 === false && turn === 1) {
document.getElementById("6").innerHTML = 'O';
O6 = true
turn--
}
if(X9 === true && X6 === true && X3 === false && O3 === false && turn === 1) {
document.getElementById("3").innerHTML = 'O';
O3 = true
turn--
}
if(X5 === true && X7 === true && X3 === false && O3 === false && turn === 1) {
document.getElementById("3").innerHTML = 'O';
O3 = true
turn--
}
if(X5 === true && X3 === true && X7 === false && O7 === false && turn === 1) {
document.getElementById("7").innerHTML = 'O';
O7 = true
turn--
}
if(X7 === true && X3 === true && X5 === false && O5 === false && turn === 1) {
document.getElementById("5").innerHTML = 'O';
O5 = true
turn--
}
if(X1 === true || X2 === true || X3 === true || X4 === true || X5 === true || X6 === true || X7 === true || X8 === true || X9 === true && turn === 1) {
if(O5 === false && X5 === false){
document.getElementById("5").innerHTML = 'O';
O5 = true
turn--} else {
if(X1 === false && O1 === false && turn === 1){
document.getElementById("1").innerHTML = 'O';
O1 = true
turn--
}
if(X2 === false && O2 === false && turn === 1){
document.getElementById("2").innerHTML = 'O';
O2 = true
turn--
}
if(X3 === false && O3 === false && turn === 1){
document.getElementById("3").innerHTML = 'O';
O3 = true
turn--
}
if(X4 === false && O4 === false && turn === 1){
document.getElementById("4").innerHTML = 'O';
O4 = true
turn--
}
if(X5 === false && O5 === false && turn === 1){
document.getElementById("5").innerHTML = 'O';
O5 = true
turn--
}
if(X6 === false && O6 === false && turn === 1){
document.getElementById("6").innerHTML = 'O';
O6 = true
turn--
}
if(X7 === false && O7 === false && turn === 1){
document.getElementById("7").innerHTML = 'O';
O7 = true
turn--
}
if(X8 === false && O8 === false && turn === 1){
document.getElementById("8").innerHTML = 'O';
O8 = true
turn--
}
if(X9 === false && O9 === false && turn === 1){
document.getElementById("9").innerHTML = 'O';
O9 = true
turn--
}
}
}
}
checkForWin()
}
function checkForWin() {
if(X1 === true && X2 === true && X3 === true){
setTimeout(XWins, 100)
turn+=2
}
if(X4 === true && X5 === true && X6 === true){
setTimeout(XWins, 100)
turn+=2
}
if(X7 === true && X8 === true && X9 === true){
setTimeout(XWins, 100)
turn+=2
}
if(X1 === true && X4 === true && X7 === true){
setTimeout(XWins, 100)
turn+=2
}
if(X2 === true && X5 === true && X8 === true){
setTimeout(XWins, 100)
turn+=2
}
if(X3 === true && X6 === true && X9 === true){
setTimeout(XWins, 100)
turn+=2
}
if(X1 === true && X5 === true && X9 === true){
setTimeout(XWins, 100)
turn+=2
}
if(X3 === true && X5 === true && X7 === true){
setTimeout(XWins, 100)
turn+=2
}
if(O1 === true && O2 === true && O3 === true){
setTimeout(OWins, 100)
turn+=2
}
if(O4 === true && O5 === true && O6 === true){
setTimeout(OWins, 100)
turn+=2
}
if(O7 === true && O8 === true && O9 === true){
setTimeout(OWins, 100)
turn+=2
}
if(O1 === true && O4 === true && O7 === true){
setTimeout(OWins, 100)
turn+=2
}
if(O2 === true && O5 === true && O8 === true){
setTimeout(OWins, 100)
turn+=2
}
if(O3 === true && O6 === true && O9 === true){
setTimeout(OWins, 100)
turn+=2
}
if(O1 === true && O5 === true && O9 === true){
setTimeout(OWins, 100)
turn+=2
}
if(O3 === true && O5 === true && O7 === true){
setTimeout(OWins, 100)
turn+=2
}
}
function OWins() {
alert("O Wins")
OWinNum+=1
document.getElementById("win").innerHTML = 'X:' + XWinNum + '-' + 'O:' + OWinNum
}
function XWins() {
alert("X Wins")
XWinNum+=1
document.getElementById("win").innerHTML = 'X:' + XWinNum + '-' + 'O:' + OWinNum
}
function Restart() {
document.getElementById("1").innerHTML = '-'
document.getElementById("2").innerHTML = '-'
document.getElementById("3").innerHTML = '-'
document.getElementById("4").innerHTML = '-'
document.getElementById("5").innerHTML = '-'
document.getElementById("6").innerHTML = '-'
document.getElementById("7").innerHTML = '-'
document.getElementById("8").innerHTML = '-'
document.getElementById("9").innerHTML = '-'
turn = 0
X1 = false
X2 = false
X3 = false
X4 = false
X5 = false
X6 = false
X7 = false
X8 = false
X9 = false
O1 = false
O2 = false
O3 = false
O4 = false
O5 = false
O6 = false
O7 = false
O8 = false
O9 = false
}
</script>
<table>
<tr>
<td align="center"><button id="1" onclick="Xon1()">-</button></td>
<td align="center"><button id="2" onclick="Xon2()">-</button></td>
<td align="center"><button id="3" onclick="Xon3()">-</button></td>
</tr>
<tr>
<td align="center"><button id="4" onclick="Xon4()">-</button></td>
<td align="center"><button id="5" onclick="Xon5()">-</button></td>
<td align="center"><button id="6" onclick="Xon6()">-</button></td>
</tr>
<tr>
<td align="center"><button id="7" onclick="Xon7()">-</button></td>
<td align="center"><button id="8" onclick="Xon8()">-</button></td>
<td align="center"><button id="9" onclick="Xon9()">-</button></td>
</tr>
</table>
<button onclick="Restart()">Restart</button>
<h4 id="win"></h4>
</body>
</html>Hey I am new to stack overflow and yes I know it's a lot of code but I'm working on learning loops and arrays to shorten it. Back to the point. Can anybody tell me why X gets two wins whenever they win. (To win go to the middle right, then bottom left, then bottom right, then top right.) It would be much appreciated if anybody could tell me why it is doing this. It would also be nice if anybody could give me a good link to learn loops and arrays that isn't too confusing.
I need it to stop giving X two wins when they win. I have tried to copy and paste the O win and rename the variables so it applies to X and I also did the same for the function Xwins().
In your compMove() function checkForWin() calls two times. That's why it shows winner two times.
When the 'O' wins just second checkForWin() works. But When the 'X' wins both checkForWin() is run.
NOT: You really need to work on your code skills. It's not a clean code example. You can look and learn somthing about SOLID and Clean Code.
Take a look at: https://gist.github.com/wojteklu/73c6914cc446146b8b533c0988cf8d29