Trouble Arising in Showing the "X" Symbol upon Initial Click in Tic-Tac-Toe Match

Question

Trouble Arising in Showing the "X" Symbol upon Initial Click in Tic-Tac-Toe Match

Description:

I'm currently developing a tic-tac-toe game, and I've run into an interesting issue. When I click on any box for the first time, the "X" symbol doesn't show up. However, it works fine after the initial click.

Problem Details:

Issue 1: "X" not appearing on initial click
- Upon clicking on a box in the game, the "X" symbol fails to display initially. Subsequent clicks work as expected without any issues.

If you come across any other issues or have suggestions for improvement, please share them with me as I am relatively new to coding.

Code Snippets:

Below is the essential code snippet for my tic-tac-toe game:

... (code has been omitted for brevity)

Regards

A big thank you to those who are trying to help me solve this problem!

What I've Tried:

In response to advice from an experienced user on the OpenAI platform, I meticulously checked the turner and tosswinner functions. I confirmed that the tosswinner function is properly triggered upon box clicks.

Additional Information:

This game is being developed using HTML, CSS, and JavaScript. There seems to be a potential conflict with event handling or timing, but I haven't been able to pinpoint the exact cause of the problem.

Request for Help:

Any guidance or recommendations on resolving the aforementioned issues would be highly appreciated. If you can detect any errors in my code or propose alternative solutions, your assistance would be invaluable.

Thank you for your support!

javascript html css game-development

Answer 1

Answer №1

Your issue stems from the fact that your click event listener is only activated after the initial click, as it is part of the tosswinner function.

To resolve this, you need to relocate the click event listener for boxes to the global scope. This way, even if the first click is not triggered, the event will still be registered in advance.

//move the click event listener to the global scope
boxes.forEach((box) => {
  box.addEventListener("click", function() {
    tosswinner.call(this);
  });
});

let boxes = document.querySelectorAll('.boxes');
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;

//move the click event listener to the global scope
boxes.forEach((box) => {
  box.addEventListener("click", function() {
    tosswinner.call(this);
  });
});

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) => {
    //you don't need this anymore
    //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();
}

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  align-items: center;
}

#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: 20px;
  color: white;
  font-weight: bold;
}

.toss {
  height: 40px;
  width: 90px;
  margin: 0px 20px 30px 18px;
  background: royalblue;
  color: white;
  font-size: 20px;
  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: 15px;
  font-weight: bolder;
  margin-bottom: 38px;
}

.text1 {
  color: white;
  font-size: 15px;
  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);
  }
}

<div id="mainbox">
  <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>

<div id="pop">
  <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>

<div id="tosser">
  <div class="head">CHOOSED</div>
  <div id="tossing" class="load"> </div>

</div>

<div id="toss1">
  <div class="head">TOSSING</div>
  <div id="tossing1" class="load">
  </div>

</div>

Answer 2

Your issue stems from the fact that your click event listener is only activated after the initial click, as it is part of the tosswinner function.

To resolve this, you need to relocate the click event listener for boxes to the global scope. This way, even if the first click is not triggered, the event will still be registered in advance.

//move the click event listener to the global scope
boxes.forEach((box) => {
  box.addEventListener("click", function() {
    tosswinner.call(this);
  });
});

let boxes = document.querySelectorAll('.boxes');
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;

//move the click event listener to the global scope
boxes.forEach((box) => {
  box.addEventListener("click", function() {
    tosswinner.call(this);
  });
});

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) => {
    //you don't need this anymore
    //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();
}

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  align-items: center;
}

#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: 20px;
  color: white;
  font-weight: bold;
}

.toss {
  height: 40px;
  width: 90px;
  margin: 0px 20px 30px 18px;
  background: royalblue;
  color: white;
  font-size: 20px;
  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: 15px;
  font-weight: bolder;
  margin-bottom: 38px;
}

.text1 {
  color: white;
  font-size: 15px;
  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);
  }
}

<div id="mainbox">
  <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>

<div id="pop">
  <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>

<div id="tosser">
  <div class="head">CHOOSED</div>
  <div id="tossing" class="load"> </div>

</div>

<div id="toss1">
  <div class="head">TOSSING</div>
  <div id="tossing1" class="load">
  </div>

</div>

Trouble Arising in Showing the "X" Symbol upon Initial Click in Tic-Tac-Toe Match

Answer №1

Similar questions

Protecting Node.js Files

Adjusting the decimal points of numbers within a table to create the illusion of a "centered" alignment within the cell

Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

The integration of Express server with static ejs files, CSS, and JavaScript is experiencing technical difficulties

Guide to creating a CSS horizontal line with square elements on either side of a title

produce in the element that is invoked within an each function

Present a pop-up notification box with a countdown of 30 seconds prior to the expiration of a session timeout in JSF

The functionality of $watch in AngularJS is not meeting the desired outcomes

Encountering an issue with state setting - Experiencing an excessive amount of re-renders in a

Form using Ajax technology, including two drop-down menus sourced externally

Customize the appearance of parent components based on the content of their child elements

Unable to capture screenshot of hovered element using Cypress

When hovering, transition occurs unless the cursor is over a specific element

Is the callback for a request always invoked?

Turn off the special treatment of the "class" attribute

Transferring an array from JavaScript to PHP, encountering an issue with determining the length

Using VML for background images in Outlook using HAML: A step-by-step guide

What is the best way to generate a JSON output that contains the entire

Injecting SVG styling into HTML using the content tag and CSS

The Angular 1.x Ajax request is not triggering the expected update in the view