The display function in Javascript has a tendency to work sporadically

Question

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the grid. It's a work in progress, but I believe starting off this way is a good approach.

However, I've encountered an issue where clicking on a square causes the "O" to randomly disappear. Sometimes it happens after the first click, other times after four clicks. Can anyone shed some light on what might be causing this random behavior?

Below is the function that I'm currently using and how one of the squares is structured in HTML:

function hideO() {
  document.getElementById("O" + event.target.id).style.display = "none";
}

<div class="square" >
  <button class="1" id="1" onclick="hideO()">
      <p class="X1" id="X1">X</p>
      <p class="O1" id="O1">O</p>
  </button>
</div>

You can view all of my code here.

javascript html css function

Answer 1

Answer №1

The issue lies in the fact that event.target returns the specific element you clicked on, meaning if you believe you clicked on .square, you actually clicked on the nested p element within it. One potential solution is to utilize event.currentTarget. This will always return the element where the click event was attached:

function hideO() {
  document.getElementById("O" + event.currentTarget.id).style.display = "none";
}

Additionally, I am uncertain about why you are invoking hideO from .grid. It might be best to eliminate this.

Edit: The issue may arise because event.currentTarget is only valid at the time of the event firing. Consider an alternate approach.

Adjust your hideO() function as shown below:

function hideO(btn) {
  btn.querySelector("#O" + btn.id).style.display = "none";
}

Instead of using onclick="hideO()", use onclick="hideO(this)" to pass the clicked button as a parameter. Once you have access to that button in your function, you can target the "O" element within it.

Answer 2

The issue lies in the fact that event.target returns the specific element you clicked on, meaning if you believe you clicked on .square, you actually clicked on the nested p element within it. One potential solution is to utilize event.currentTarget. This will always return the element where the click event was attached:

function hideO() {
  document.getElementById("O" + event.currentTarget.id).style.display = "none";
}

Additionally, I am uncertain about why you are invoking hideO from .grid. It might be best to eliminate this.

Edit: The issue may arise because event.currentTarget is only valid at the time of the event firing. Consider an alternate approach.

Adjust your hideO() function as shown below:

function hideO(btn) {
  btn.querySelector("#O" + btn.id).style.display = "none";
}

Instead of using onclick="hideO()", use onclick="hideO(this)" to pass the clicked button as a parameter. Once you have access to that button in your function, you can target the "O" element within it.

The display function in Javascript has a tendency to work sporadically

Answer №1

Similar questions

Determining the Missing Focus: Discovering the Vacant '":focus'" in Jquery

Removing extra spaces from a hyperlink using CSS

Using JavaScript's setInterval function in conjunction with Math.random to obtain a random value

What could be causing my CORS fetch request to not send cookies to the server?

Tips for implementing server-side rendering in Jade using an Array of JSON objects instead of just a single JSON object

Using JQuery Ajax in Internet Explorer will only execute a single time

Implementing Conditional Display of Span Tags in React Based on Timer Duration

Concentrate on elements that are activated without the need for clicking

"An error occurred when processing the JSON data, despite the JSON

typescript in conjunction with nested destructuring

The status of the 'slider' may be 'undefined'

The Magic of jQuery Cross Site Fetch

Error with the setInterval() method, function is not executing

Steps to automatically navigate to a specific Div upon page initialization

Guide on how to navigate users to a new page using react-router-dom v6 within a class-based component

Steps for setting up a barcode scanner on a smartphone (both iPhone and Android) using zxing in an html app

HighCharts velocity gauge inquiry

How can Vue JS 3 components exchange data between each other?

A lateral sliding motion

Utilize a display value while maintaining the v-model binding in Vue.js