Recently, I decided to dive into Javascript and kick off my very first game project - a Tic Tac Toe game.
If you're curious to see the code for my project, you can check it out here: Tic Tac Toe Project
One feature I'm eager to implement is a notification that pops up when a user wins the game.
To test this functionality, I tried creating a condition where the player would win if they placed 3 X's in a row on the first line:
HTML :
I added an empty paragraph with an ID that will be used specifically for displaying the notification
<p id="Notif" style="text-align : center"></p>
JS :
var Boxes = document.querySelectorAll("td")
Notif = document.getElementById("Notif")
if (Boxes[0].textContent === "X" && Boxes[1].textContent === "X" && Boxes[2].textContent === "X") {
console.log("Check Ok");
Notif.textContent = "You won!"
}
However, I encountered issues and suspect it might have to do with the execution order in the script or potentially require a loop?
When I load the page, place 3 "X"s in the first line, and then run the following code snippet in the console:
if (Boxes[0].textContent === "X" && Boxes[1].textContent === "X" && Boxes[2].textContent === "X") {
console.log("Check Ok");
I do see the log message "Check Ok".