Description:
I’m working on a tic-tac-toe game, and I’m encountering an issue where the “X” sign is not displaying on the first click on any box. After the first click, it works correctly.
Problem Details:
-
Issue 1: “X” not displaying on the first click
- When I click on a box in the game, the “X” sign doesn’t appear on the first click. However, subsequent clicks work as expected.
If you find any further problems in my code then please suggest me as I am a beginner
Code Snippets:
Here is the relevant code for my tic-tac-toe game:
HTML file:
replit
<div class="boxes" onclick = "tosswinner(this);turner();"></div>
<div class="boxes" onclick = "tosswinner(this);turner();"></div>
<div class="boxes" onclick = "tosswinner(this);turner();"></div>
<div class="boxes" onclick = "tosswinner(this);turner();"></div>
<div class="boxes" onclick = "tosswinner(this);turner();"></div>
<div class="boxes" onclick = "tosswinner(this);turner();"></div>
<div class="boxes" onclick = "tosswinner(this);turner();"></div>
<div class="boxes" onclick = "tosswinner(this);turner();"></div>
<div class="boxes" onclick = "tosswinner(this);turner();"></div>
<div class = "head">TOSS</div>
<div id = "para">HEADS OR TAILS ? </div>
<br/>
<div>
<button class = "toss" onclick = "Heads()">HEADS</button>
<button class = "toss"onclick = "Tail()">TAIL</button>
</div>
</div>
CHOOSED
<div class = "head">TOSSING</div>
<div id="tossing1" class="load">
</div>
display:flex;
justify-content:center;
height:100vh;
width:100vw;
align-content:center;
flex-direction:column;
}
#mainbox{
width: 240px;
height: 240px;
display:flex;
position:absolute;
right:60px;
flex-flow:row wrap;
background-color: yellow;
}
.boxes{
height:75px;
width:75px;
background:red;
margin:2px;
color:white;
font-size:25px;
}
#pop,#tosser,#toss1{
height:200px;
width:280px;
background:skyblue;
position:absolute;
top:0%;
left:12.5%;
visibility:hidden;
transform:translate(0px,0px)
scale(0.01);
transition:transform 0.4s,top 0.4s;
display:flex;
flex-flow:column wrap;
border-radius:20px;
justify-content:space-between;
align-items:center;
}
#pop.popup,#tosser.tosseropen,#toss1.open1{
visibility:visible;
display:flex;
top:0%;
transform:translate(0px,100px)
scale(1);
}
.head{
width:280px;
height:50px;
background:darkblue;
color:white;
font-size:30px;
display:flex;
justify-content:center;
align-items:center;
font-weight:bolder;
border-top-left-radius:20px;
border-top-right-radius:20px;
}
#para{
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
color:white;
font-weight:bold;
}
.toss{
height:50px;
width:100px;
margin:0px 20px 30px 18px;
background:royalblue;
color:white;
font-size:25px;
border:none;
border-radius:10px;
font-weight:bold;
}
#tossing{
color:white;
font-size:27px;
font-weight:bolder;
margin-bottom:60px;
}
.text{
color:white;
font-size:18px;
font-weight:bolder;
margin-bottom:38px;
}
.text1{
color:white;
font-size:25px;
font-weight:bolder;
margin-bottom:65px;
}
.load{
height:50px;
width:50px;
border:5px black solid;
border-top:5px royalblue solid;
border-radius:50%;
position:fixed;
top:80px;
animation:SpinAnimate 1s linear 0s infinite normal;
}
@keyframes SpinAnimate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
let arr = Array.from(boxes)
console.log(arr);
let pop = document.getElementById(“pop”)
let tossing = document.getElementById(“tossing”)
let tosser = document.getElementById(“tosser”)
let toss1 = document.getElementById(“toss1”)
let tossing1 = document.getElementById(“tossing1”)
setTimeout(() => {
pop.classList.add(“popup”)
},3000)
let botTurn = “”
let choosedToss = “”;
let count = 0;
async function turner(){
let selected = arr[Math.floor(Math.random()*arr.length)];
setTimeout(() => {
if (selected.innerHTML == “”){
setTimeout(() => {
selected.innerHTML='O'
},50)
}else{
return turner()
}
},50)
count++;
}
function tosswinner() {
let box = this
if (box.innerHTML === ""){
box.innerHTML = “X”;
}
boxes.forEach(box => {
box.addEventListener(‘click’, function() {
tosswinner.call(this);
});
count++;
})
}
async function FinalFunc() {
let Hulk = new Promise((resolve,reject) => {
setTimeout(() => {
toss1.classList.remove("open1")
resolve(1)
},2000);
});
const result = await Hulk;
console.log(result);
}
async function R() {
let THOR = new Promise((resolve,reject) => {
setTimeout(() => {
if(choosedToss == botTurn){
tossing1.innerHTML="you won , first turn is yours";
}else{
tossing1.innerHTML="you have losted , you will play next to the winner ";
}
tossing1.classList.add("text1")
resolve("Thor");
},1500);
});
const result = await THOR;
console.log(result);
}
async function botTurns(){
let TOSS = [“Heads”,”Tail”];
botTurn = TOSS[Math.floor(Math.random()*TOSS.length)];
tossing1.innerHTML=<h1>${botTurn}</h1>
tossing1.classList.add(“text”)
}
async function Messi() {
let cap = new Promise((resolve,reject) => {
setTimeout(() => {
tossing1.classList.remove(“load”)
botTurns()
resolve(botTurn);
},3000);
});
const result = await cap;
console.log(result);
}
async function Message() {
let stark = new Promise((resolve,reject) => {
setTimeout(() => {
tossing.classList.remove(“load”)
tossing.innerHTML=`you choosed ${choosedToss} !`
resolve(`you choosed ${choosedToss}`);
},1000);
});
const result = await stark;
console.log(result);
}
async function popdown() {
let tony = new Promise((resolve,reject) => {
setTimeout(() => {
tosser.classList.remove(“tosseropen”)
resolve("rate");
},2000);
});
const result = await tony;
console.log(result);
}
async function Heads(){
choosedToss = “Heads”
pop.classList.remove(“popup”);
tosser.classList.add(“tosseropen”)
await Message();
await popdown();
toss1.classList.add(“open1”)
await Messi();
await R();
await FinalFunc()
}
async function Tail(){
choosedToss = “Tail”
pop.classList.remove(“popup”);
tosser.classList.add(“tosseropen”)
await Message();
await popdown();
toss1.classList.add(“open1”)
await Messi();
await R();
await FinalFunc();
}
Regards
Thank you if you only tried to solve my problem
What I’ve Tried:
I’ve reviewed the code for the turner and tosswinner functions, as suggested by an expert on the OpenAI platform.I’ve ensured that I’m correctly invoking the tosswinner function on box clicks.
Additional Information:
I’m using HTML, CSS, and JavaScript to build this game.I suspect there might be a conflict in event handling or a timing issue, but I’m unable to pinpoint the exact problem.
Request for Help:
I would appreciate any guidance or suggestions on how to fix the issues described above. If you can identify the problem in my code or offer a different approach to solve these issues, it would be greatly appreciated.
Thank you for your help!
