i'm learning to code and built this game during the last few days but my solution it's so clumsy compared to yours.. thank you for sharing this, is very helpful to learn, your solution is amazing!
Thanx for your simplicity ,tried to do this game using another video was difficult, too much code lines Thank you for including the code in the comment😍
since we are not saving anything in any kind of storage we can just just do this function restartGame(){ location.reload(); }; to reset the game. im pretty new to js so maybe theres a good reason bro didnt do this but it does work.
Thank you for the learning experience! Is there a way to change the X and O's to an image? Would I have to stare the image in a variable? Thank you again!
How I understand it: Pretty much, THIS is referring to the cell you just clicked (THIS one), And the cellIndex comes from the HTML elements we made for the cells, we made that attribute named ‘cellIndex’ and gave it a number for what cell it is in our options[ ] array Pretty much, you pass those in to the updateCell( ) and it updates whatever cell you clicked on(THIS), by setting its text content to whatever the current player is (x or o) and uses the cell index attribute to update the options [] array, where all our cells are which are empty to start with Hope I explained it okay :-P
It tells the updateCell function which cell to change the textContent for. You're passing it as 'this', calling it 'cell' in the updateCell function, and then updating the text of it via cell.textContent = currentPlayer. He could have done the update of the text and the addition of the clicked sell to the options array in the cellClicked function, but to keep it clean, he did it as a separate function and just passed it along. like this: function cellClicked () { const cellIndex = this.getAttribute("cellIndex") console.log(this) if (options[cellIndex] != "" || !running){ return; } options[cellIndex] = player; this.textContent = player; checkWinner(); }
easy loved it except the last part thats the wining game foreach with some and every method can run through the global variable winning condition, otherwise loved it, wish u implemented some Ai too , amazing and very clean code , can u talk about writing clean code?
Hi, I find some error when the game end and got the winner. The current winner is not match with the result ex. the "X" win but it display "O" win. Is there any suggestion to fix that please?
Hi @@hiba-o9w I noticed the same issue in my code however I managed to fix the issue. What I understood was that suppose currentPlayer === "X" it means "X" is about to make his move and if "X" wins because of the order our functions are being called the changePlayer() function is called first before Checkwinner() function thus making the currentPlayer === "0" as a result when we display the winner if we use the currentPlayer variable it will be "0" thus it will be the opposite of the true winner. so to Fix this issue before displaying who the winner is, I reversed the current player as follows winner = (currentPlayer === "X") ? "O": "X"; and then display the winner on winning statusText. hope its gonna be helpful :)
If you are using visual studio code, download ''live server'' extension. Then go to your html file and right click and select ''open with live server''.
Open two tabs simultaneously side-by-side, the editor where you code and the browser where it displays. Change the code and refresh after every save or install the live server extension 🥂
delete current player at restartGame and change it to: if (Math.random() < 0.5) { currentPlayer = "X"; } else { currentPlayer = "O"; }; IF YOU WANT THAT A RANDOM PLAYER GETS CHOOSEN
For anyone who has the same issue, check to see if you made a typo in your code. The reason why my code was not working is because I wrote "#restartBn" instead of "#restartBtn".
this was too hard hand too fast to me thb, many things i find confusing, is there anything before this that is easier step? i have done an rps game, blogpost and todolist, any tips on what my next step is?
you need to put the script tag after the HTML in the index.html and make sure you have used # when declaring the const and the right id. this solved it for me.
@@Megapolis199 you need to put the script tag after the HTML in the index.html and make sure you have used # when declaring the const and the right id. this solved it for me.
The error message you're encountering, "Uncaught TypeError: Cannot set properties of null (setting 'textContent')" typically indicates that you are trying to set the textContent property of a variable that is currently null. This can happen when you're trying to manipulate an element in your HTML document using JavaScript, but the element with the specified identifier doesn't exist in the DOM.
It won’t let me actually play it I tried and copied all of the stuff but it doesn’t work the text, button is there but not working, and board is good though (no errors in vscode though)
bro my tic tac is showing on the website but, all the gaps were autofilled, even the restart buttons are not working.So i checked my whole code,but there is no mistake.how to solve this problem.Any suggetions pls?
you need to put the script tag after the HTML in the index.html and make sure you have used # when declaring the const and the right id. this solved it for me.
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
const cells = document.querySelectorAll(".cell");
const statusText = document.querySelector("#statusText");
const restartBtn = document.querySelector("#restartBtn");
const winConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
let options = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let running = false;
initializeGame();
function initializeGame(){
cells.forEach(cell => cell.addEventListener("click", cellClicked));
restartBtn.addEventListener("click", restartGame);
statusText.textContent = `${currentPlayer}'s turn`;
running = true;
}
function cellClicked(){
const cellIndex = this.getAttribute("cellIndex");
if(options[cellIndex] != "" || !running){
return;
}
updateCell(this, cellIndex);
checkWinner();
}
function updateCell(cell, index){
options[index] = currentPlayer;
cell.textContent = currentPlayer;
}
function changePlayer(){
currentPlayer = (currentPlayer == "X") ? "O" : "X";
statusText.textContent = `${currentPlayer}'s turn`;
}
function checkWinner(){
let roundWon = false;
for(let i = 0; i < winConditions.length; i++){
const condition = winConditions[i];
const cellA = options[condition[0]];
const cellB = options[condition[1]];
const cellC = options[condition[2]];
if(cellA == "" || cellB == "" || cellC == ""){
continue;
}
if(cellA == cellB && cellB == cellC){
roundWon = true;
break;
}
}
if(roundWon){
statusText.textContent = `${currentPlayer} wins!`;
running = false;
}
else if(!options.includes("")){
statusText.textContent = `Draw!`;
running = false;
}
else{
changePlayer();
}
}
function restartGame(){
currentPlayer = "X";
options = ["", "", "", "", "", "", "", "", ""];
statusText.textContent = `${currentPlayer}'s turn`;
cells.forEach(cell => cell.textContent = "");
running = true;
}
Document
Tic Tac Toe
Restart
.cell{
width: 75px;
height: 75px;
border: 2px solid;
box-shadow: 0 0 0 2px;
line-height: 75px;
font-size: 50px;
cursor: pointer;
}
#gameContainer{
font-family: "Permanent Marker", cursive;
text-align: center;
}
#cellContainer{
display: grid;
grid-template-columns: repeat(3, auto);
width: 225px;
margin: auto;
}
thanks so much !!
thanks bro bro code
hhvv
index.js:23 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
on the line need helppppp...........
const cells = document.querySelectorAll(".cell");
const statusText = document.querySelector("#statusText");
const restartBtn = document.querySelector("#restartBtn");
const winConditions =[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
let options = ["", "", "", "", "", "", "", "", ""];
let currentPlayer= "X";
let running = false;
initializeGame();
function initializeGame(){
cells.forEach(cell => cell.addEventListener("click", cellClicked));
restartBtn.addEventListener("click", restartGame);
statusText.textContent = `${currentPlayer}'s turn`;
running = true;
}
function cellClicked(){
const cellIndex = this.getAttribute("cellIndex");
if(options[cellIndex] != "" || !running) {
return;
}
updateCell(this, cellIndex);
checkWinner();
}
function updateCell(cell, index){
options[index] = currentPlayer;
cell.textContent = currentPlayer;
}
function changePlayer(){
currentPlayer = (currentPlayer == "X") ? "O": "X";
statusText.textContent = `${currentPlayer}'s turn`;
}
function checkWinner(){
let roundWon = false;
for(let i = 0; i < winConditions.length; i++ ){
const conditions = winConditions[i];
const cellA = options[condition[0]];
const cellB = options[condition[1]];
const cellC = options[condition[2]];
if(cellA == "" || cellB == "" || cellC){
roundWon = true;
break;
}
}
if(roundWon){
statusText.textContent = `${currentPlayer} wins!`;
running = false;
}
else if(!options.includes("")){
statusText.textContent = `Draw!`;
running = false;
}
else{
changePlayer();
}
}
function restartGame(){
currentPlayer = "X";
options = ["", "", "", "", "", "", "", "", ""];
statusText.textContent = `${currentPlayer}'s turn`;
celss.forEach(cell => cell.textContent)
}
Thank you!
i'm learning to code and built this game during the last few days but my solution it's so clumsy compared to yours.. thank you for sharing this, is very helpful to learn, your solution is amazing!
You have saved my life made understanding Javascript a bit easier for me
😮😮
Thank you for including the code in the comment! I had my HTML filed messed up. Thank you for sharing your project with us.
I have learned a lot in a few minutes. Thank you!
Thanx for your simplicity ,tried to do this game using another video was difficult, too much code lines
Thank you for including the code in the comment😍
bro your videos help so much. thank 10/10
That was very clean and understandable. Thanks a lot😍
Awesome content! You couldn't have written this code any better.
Continue dude'
I love this guy
Yo Bro Code! Thanks for this play along video. I learned some new things along the way!
BROOO thankyou so much, this really helped and the tutorial was really easy to use as well :)
since we are not saving anything in any kind of storage we can just just do this function restartGame(){
location.reload();
}; to reset the game. im pretty new to js so maybe theres a good reason bro didnt do this but it does work.
after the end of the match, cant we add any other tag for sharing our result with others in social media apps?
Thank you for the learning experience! Is there a way to change the X and O's to an image? Would I have to stare the image in a variable? Thank you again!
const yourCell = document.querySelector(".yourCell"); const insertX = document.createElement("img"); const insertO = document.createElement("img"); insertX.src = imgX.jpg; insertO.src = imgO.jpg; yourCell.append(insertX);
Nice code man thanks!
08:35 is hoisting of the 1st function.
please why did you pass in this and cellIndex as arguments in the updateCell() function under the cellClicked() function
🙂
How I understand it:
Pretty much, THIS is referring to the cell you just clicked (THIS one),
And the cellIndex comes from the HTML elements we made for the cells, we made that attribute named ‘cellIndex’ and gave it a number for what cell it is in our options[ ] array
Pretty much, you pass those in to the updateCell( ) and it updates whatever cell you clicked on(THIS), by setting its text content to whatever the current player is (x or o) and uses the cell index attribute to update the options [] array, where all our cells are which are empty to start with
Hope I explained it okay :-P
It tells the updateCell function which cell to change the textContent for. You're passing it as 'this', calling it 'cell' in the updateCell function, and then updating the text of it via cell.textContent = currentPlayer. He could have done the update of the text and the addition of the clicked sell to the options array in the cellClicked function, but to keep it clean, he did it as a separate function and just passed it along. like this:
function cellClicked () {
const cellIndex = this.getAttribute("cellIndex")
console.log(this)
if (options[cellIndex] != "" || !running){
return;
}
options[cellIndex] = player;
this.textContent = player;
checkWinner();
}
Thanks for help love you bro
Got it 🤩
please upload a Zero to hero video for wordpress bro ! the way of your teaching was just amazing accept my request bro 😫🙏.
excellent
Uhh can i ask something
Does any reason for you not using onclick or you just not want use it ?
using addEventListener makes the code look more maintained and readable plus easy
underrated
Awesome
easy loved it except the last part thats the wining game foreach with some and every method can run through the global variable winning condition, otherwise loved it, wish u implemented some Ai too , amazing and very clean code , can u talk about writing clean code?
thanks, alot of help.
Are any of these available in Java, or should I just mod it 🤔
Great video
Also do a video on todo list
Help! I under some of the logic of this game but I'm confused as to how do you know what you have to do next?
Hi, I find some error when the game end and got the winner. The current winner is not match with the result ex. the "X" win but it display "O" win. Is there any suggestion to fix that please?
Im facing the same problem! Did u fix it?
@@hiba-o9w no, not yet🥹
Hi @@hiba-o9w I noticed the same issue in my code however I managed to fix the issue. What I understood was that suppose currentPlayer === "X" it means "X" is about to make his move and if "X" wins because of the order our functions are being called the changePlayer() function is called first before Checkwinner() function thus making the currentPlayer === "0" as a result when we display the winner if we use the currentPlayer variable it will be "0" thus it will be the opposite of the true winner.
so to Fix this issue before displaying who the winner is, I reversed the current player as follows
winner = (currentPlayer === "X") ? "O": "X"; and then display the winner on winning statusText. hope its gonna be helpful :)
I love the video but I am having so much problems in my code, I am copying like you do but I dont get the same results when I go to live server...
I am new in the code things so I have a question. After I made the game how can I see the game like he sees it in the right of the screen
If you are using visual studio code, download ''live server'' extension. Then go to your html file and right click and select ''open with live server''.
Open two tabs simultaneously side-by-side, the editor where you code and the browser where it displays. Change the code and refresh after every save or install the live server extension 🥂
🔥
Sir, is it possible to change the color of the "X" and the "O"
I mean "X" can be red and the other green
Yes its actually possible you can do it with css
just go to the cell class and change the color attribute
function updateCell (cell, index) {
options[index] = currentPlayer;
if (currentPlayer == "X") {
document.getElementById(`cell${index}`).style.color = "red";
cell.textContent = currentPlayer;
} else if (currentPlayer == "O") {
document.getElementById(`cell${index}`).style.color = "green";
cell.textContent = currentPlayer;
}
}
delete current player at restartGame and change it to:
if (Math.random() < 0.5) {
currentPlayer = "X";
} else {
currentPlayer = "O";
};
IF YOU WANT THAT A RANDOM PLAYER GETS CHOOSEN
when I click on the restartBtn I can't replay, does someone has an idea ?
post your code it's prob some error somehwere
For anyone who has the same issue, check to see if you made a typo in your code.
The reason why my code was not working is because I wrote "#restartBn" instead of "#restartBtn".
this was too hard hand too fast to me thb, many things i find confusing, is there anything before this that is easier step? i have done an rps game, blogpost and todolist, any tips on what my next step is?
Hi, why on 26row "this" writen ?
hey, i have a question. Do you maybe have the code just in Pyscript?
I have error at 25 line restartBtn.addEventListener is not a function. Pls help
Same shit for restartBtn. Cannot read properties of null (reading 'addEventListener')
you need to put the script tag after the HTML in the index.html and make sure you have used # when declaring the const and the right id. this solved it for me.
@@Megapolis199 you need to put the script tag after the HTML in the index.html and make sure you have used # when declaring the const and the right id. this solved it for me.
@@artenisalija or put it at the beginning and use "defer".. like this:
Did you fix it by now ?
I'm getting a type error saying this.getAttribute is not a method, any help?
Remove the cellClicked function, and write the code directly inside cell.addEventListener()..
Like this
cells.forEach((cell) =>
cell.addEventListener("click", (e) => {
const cellIndex = e.target.getAttribute("cellIndex");
console.log(cellIndex);
if (options[cellIndex] != "" || !running) {
return;
}
updateCell(e.target, cellIndex);
changePlayer();
checkWinner();
})
);
game stops working after one win, gonna try and fix that
am stuck at status text it says handwork.html:71 Uncaught TypeError: Cannot set properties of null (setting 'textContent')
at initializeGame
The error message you're encountering, "Uncaught TypeError: Cannot set properties of null (setting 'textContent')" typically indicates that you are trying to set the textContent property of a variable that is currently null. This can happen when you're trying to manipulate an element in your HTML document using JavaScript, but the element with the specified identifier doesn't exist in the DOM.
🙏🙏
eccellent
It won’t let me actually play it I tried and copied all of the stuff but it doesn’t work the text, button is there but not working, and board is good though (no errors in vscode though)
I tried coping your code words for words but it didn’t work
Bad idea
Please someone give me advise.How I can won't forget what I learned?
do it over and but like in the sort of a project
Practice
hey bro, can you help me? i copied your css like in the video , but the scare wont place as i wanted can you help me? srry for my bad english
square*
bro my tic tac is showing on the website but, all the gaps were autofilled, even the restart buttons are not working.So i checked my whole code,but there is no mistake.how to solve this problem.Any suggetions pls?
👍
howww i still dont get it
I only get it after several weeks of writing the code by just repeating it 😅
RestartGame is not a function. Pls help
lowercase "r"
statusText.textContent = `${currentPlayer}'s turn`
not showing any text all the spellings are correct can anyone please help me
and the code in github? xd
Didn’t work😢
Instead of just writing code in bullet speed please do some explanation as well my Big Bro 💝.
random comment
random comment
why it did not word at “ restartBtn.addEventListener(“click”, resetGame); ”😢
it is onclick
Go back to index js, ensure that cons no 2 & 3 "document.queryselector" not "document.queryselectorAll"
you need to put the script tag after the HTML in the index.html and make sure you have used # when declaring the const and the right id. this solved it for me.
i did it like this ,document.getElementById("restartBtn").onclick = restartGame();
@@artenisalija how ???