I'm currently working on a Connect Four game. I have very little experience and I can't figure out why I am receiving this error message and how to fix it. I tried searching it up but I couldn't really understand what it meant. I started getting this problem after I tried to add the win conditions. I would really appreciate it if someone could help me out.
///////////////////// CONSTANTS /////////////////////////////////////
const winningConditions = [
//horizontal
[35, 36, 37, 38],
[36, 37, 38, 39],
[37, 38, 39, 40],
[38, 39, 40, 41],
[28, 29, 30, 31]
[29, 30, 31, 32],
[30, 31, 32, 33],
[31, 32, 33, 34]
[21, 22, 23, 24],
[22, 23, 24, 25],
[23, 24, 25, 26],
[24, 25, 26, 27],
[14, 15, 16 ,17],
[15, 16, 17, 18],
[16, 17, 18, 19],
[17, 18, 19, 20],
[7, 8, 9 ,10],
[8, 9, 10, 11],
[9, 10, 11, 12],
[10, 11, 12, 13],
[0, 1, 2, 3],
[1, 2, 3, 4],
[2, 3, 4, 5],
[3, 4, 5, 6],
//vertical
[35, 28, 21, 14],
[28, 21, 14, 7],
[21, 14, 7, 0],
[36, 29, 22, 15],
[29, 22, 15, 8],
[22, 15, 8, 1],
[37, 30, 23, 16],
[30, 23, 16, 9],
[23, 16, 9, 2],
[38, 31, 24, 17],
[31, 24, 17, 10],
[24, 17, 10, 3],
[39, 32, 25, 18],
[32, 25, 18, 11],
[25, 18, 11, 4],
[40, 33, 26, 19],
[33, 26, 19, 12],
[26, 19, 12, 5],
[41, 34, 27, 20],
[34, 27, 20, 13],
[27, 20, 13, 6],
//diagonal(right)
[38, 32, 26, 20],
[37, 31, 25, 19],
[36, 30, 24, 18],
[35, 29, 23, 17],
[31, 25, 19, 13],
[30, 24, 18, 12],
[29, 23, 17, 11],
[28, 22, 16, 15],
[24, 18, 12, 6],
[23, 17, 11, 5],
[22, 16, 10, 4],
[21, 15, 9, 2],
//diagonal(left)
[41, 33, 25, 17],
[40, 32, 24, 16],
[39, 31, 23, 15],
[38, 30, 22, 14],
[34, 26, 18, 10],
[33, 25, 27, 9],
[32, 24, 26, 8],
[31, 23, 25, 7],
[27, 19, 11, 3],
[26, 18, 10, 2],
[25, 17, 9, 1],
[24, 16, 8, 0]
];
///////////////////// APP STATE (VARIABLES) /////////////////////////
let board;
let turn;
let win;
let redWins = 0;
let yellowWins = 0;
let ties = 0;
let first;
///////////////////// CACHED ELEMENT REFERENCES /////////////////////
const dots = Array.from(document.querySelectorAll("#board div"));
const message = document.querySelector("h2");
///////////////////// EVENT LISTENERS ///////////////////////////////
window.onload = init;
document.getElementById("board").onclick = takeTurn;
///////////////////// FUNCTIONS /////////////////////////////////////
function init() {
board = [
"", "", "", "", "", "", "","", "", "", "", "", "", "","", "", "", "", "", "", "","", "", "", "", "", "", "","", "", "", "", "", "", "","", "", "", "", "", "", "",
];
turn = "Red"
win = null
render();
}
function render() {
board.forEach(function(mark, index) {
dots[index].textContent = mark;
});
message.textContent =
win === "T" ? "It's a tie!" : win ? `${win} wins!` : `Turn: ${turn}`;
}
function takeTurn(e) {
if (!win) {
let index = dots.findIndex(function(dot) {
return dot === e.target;
});
if (board[index] === "") {
board[index] = turn;
document.getElementById("dot" + index + "").classList.add(turn)
turn = turn === "Red" ? "Yellow" : "Red";
win = getWinner();
if (win === "T") {
ties++;
document.getElementById("tScore").innerHTML = ties;
}
render();
}
}
}
function getWinner() {
let winner = null;
winningConditions.forEach(function(condition, index) {
if (
board[condition[0]] &&
board[condition[0]] === board[condition[1]] &&
board[condition[1]] === board[condition[2]] &&
board[condition[2]] === board[condition[3]]
) {
winner = board[condition[0]];
}
});
return winner;
}body {
background: white;
text-align: center;
}
td {
border-color: white;
}
p {
background-color: black;
}
table, td, th {
border: 1px solid white;
}
.dot {
height: 100px;
width: 100px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.wrap {
flex-wrap: wrap;
height: 750px;
width: 750px;
}
.container {
align-items: center;
}
.Red {
background-color: red;
}
.Yellow {
background-color: yellow;
}
#board {
background-color: blue;
display: inline-block;
}<!DOCTYPE html><html><head><title>Connect Four</title><link rel="stylesheet" href="css/connect4.css"><script defer src="js/connect4.js"></script></head><body><table class="header"><thead><tr><th><a href="index.html">Home</a></th><th><a href="tic-tac-toe.html">Tic-Tac-Toe</a></th><th><a href="ultimate-tic-tac-toe.html">Ultimate Tic-Tac-Toe</a></th><th><a href="connect4.html">Connect Four</a></th></table><h1>Connect Four</h1><h2 id="turn">Turn: Red</h2><div class="wrap container" id="board"><div class="dot" id="dot0"></div><div class="dot" id="dot1"></div><div class="dot" id="dot2"></div><div class="dot" id="dot3"></div><div class="dot" id="dot4"></div><div class="dot" id="dot5"></div><div class="dot" id="dot6"></div><div class="dot" id="dot7"></div><div class="dot" id="dot8"></div><div class="dot" id="dot9"></div><div class="dot" id="dot10"></div><div class="dot" id="dot11"></div><div class="dot" id="dot12"></div><div class="dot" id="dot13"></div><div class="dot" id="dot14"></div><div class="dot" id="dot15"></div><div class="dot" id="dot16"></div><div class="dot" id="dot17"></div><div class="dot" id="dot18"></div><div class="dot" id="dot19"></div><div class="dot" id="dot20"></div><div class="dot" id="dot21"></div><div class="dot" id="dot22"></div><div class="dot" id="dot23"></div><div class="dot" id="dot24"></div><div class="dot" id="dot25"></div><div class="dot" id="dot26"></div><div class="dot" id="dot27"></div><div class="dot" id="dot28"></div><div class="dot" id="dot29"></div><div class="dot" id="dot30"></div><div class="dot" id="dot31"></div><div class="dot" id="dot32"></div><div class="dot" id="dot33"></div><div class="dot" id="dot34"></div><div class="dot" id="dot35"></div><div class="dot" id="dot36"></div><div class="dot" id="dot37"></div><div class="dot" id="dot38"></div><div class="dot" id="dot39"></div><div class="dot" id="dot40"></div><div class="dot" id="dot41"></div></div></body></html>