Set a limit for chars in td tag [solved]

Question

Hi,
I'm making a tic tac toe game by jquery and I have trouble in setting a limit for charachters in td tag.
Every td tag should include "X" or "O" and nothing more.
Thanks for the upcoming answers.

Answer 1

Is this using jQuery enough to enlighten you?

The following uses this which will be the clicked td element and checks innerText to see if it has any letter in it. The following still binds the click event using JQuery, though:
var countClicks = 0;
$(".container table tr td").click(function(){
// if this cell wasn't clicked yet, process the click.
if (!this.innerText || this.innerText.trim() === '')
{
countClicks++;
if(countClicks%2==0){
this.innerText = "O";
}
else{
this.innerText = "X";
}
}
});

Unrelated to your question, your grid looks better if your td's font-size is in the same unit but smaller than the width and height. When I run your code, the 45px font is far larger than your 7vw.
td{
width: 7vw;
height: 7vw;
text-align: center;
font-size: 4.5vw; /*******************/
border: 5px solid darkcyan;
color: #FFF;
}

Answer 2

Yes, unfortunately it has that bug.
I finally removed jquery and rewrote my code in javascript and problem solved in that way.

But I still really wanna know how can I fix the bug in jquery.

I'll be thankful if you can help Josh Greig .

Answer 3

That's exactly what I was looking for👌👌
The css advice also helped.

Thank you so much Josh Greig 🙏🙏

Answer 4

Your question says [answered] so are you still looking for help?

Your linked code still has the bug where clicking the same cell twice adds more than one character.