Is there a way to stop myself from accidentally clicking twice on the same tile?

Question

Is there a way to stop myself from accidentally clicking twice on the same tile?

I'm currently working on a game and facing an issue where my "X" gets deleted when clicking twice on the same tile. I am able to move my "X" around, but the double-click deletion is causing trouble. I attempted using booleans but struggle with them. Is there a method to prevent this using booleans or any other approach? I am a beginner learning in school.

var firstClick = false;
var clickedTile = null;
var secondClick = false;

function movePiece(x) {
  if (secondClick == true) {
    x.innerHTML = clickedTile.innerHTML;
    clickedTile.innerHTML = "";
    secondClick = false;
    clickedTile.style.border = "1px solid black";
    clickedTile.style.height = "80px";
    clickedTile.style.width = "80px";
  } else {
    x.style.border = "3px solid red";
    x.style.width = "76px";
    x.style.height = "76px";
    clickedTile = x;
    secondClick = true;
  }
}

td {
  height: 80px;
  width: 80px;
  text-align: center;
  font-size: 300%;
}

table {
  margin-left: auto;
  margin-right: auto;
}

#title {
  text-align: center;
  font-size: 300%;
}

<div id="title">Table Game</div>
<table border=1>
  <tr>
    <td onclick="movePiece(this)">X</td>
    <td onclick="movePiece(this)"></td>
  </tr>
</table>

javascript html css

Answer 1

Answer №1

Instead of using a boolean, a class can be added or removed to show/hide the X icon.

In the solution provided below, on a click event, the script first checks if any X icons are currently active. If so, it removes the active class. Then, it adds the active class to the X icon within the clicked cell.

function movePiece(x) {
  let active = document.querySelector(".icon.active");
  if (active) {
    active.classList.remove("active")
  }
  x.querySelector(".icon").classList.add("active");
}

td {
  height: 80px;
  width: 80px;
  text-align: center;
  font-size: 300%;
}

table {
  margin-left: auto;
  margin-right: auto;
}

#title {
  text-align: center;
  font-size: 300%;
}

.icon {
  display: none;
}

.active.icon {
  border: 1px solid #000;
  height: 80px;
  width: 80px;
  display: block;
}

<div id="title">Table Game</div>
<table border=1>
  <tr>
    <td onclick="movePiece(this)">
      <div class="icon active">X</div>
    </td>
    <td onclick="movePiece(this)">
      <div class="icon">X</div>
    </td>
  </tr>
</table>

Answer 2

Instead of using a boolean, a class can be added or removed to show/hide the X icon.

In the solution provided below, on a click event, the script first checks if any X icons are currently active. If so, it removes the active class. Then, it adds the active class to the X icon within the clicked cell.

function movePiece(x) {
  let active = document.querySelector(".icon.active");
  if (active) {
    active.classList.remove("active")
  }
  x.querySelector(".icon").classList.add("active");
}

td {
  height: 80px;
  width: 80px;
  text-align: center;
  font-size: 300%;
}

table {
  margin-left: auto;
  margin-right: auto;
}

#title {
  text-align: center;
  font-size: 300%;
}

.icon {
  display: none;
}

.active.icon {
  border: 1px solid #000;
  height: 80px;
  width: 80px;
  display: block;
}

<div id="title">Table Game</div>
<table border=1>
  <tr>
    <td onclick="movePiece(this)">
      <div class="icon active">X</div>
    </td>
    <td onclick="movePiece(this)">
      <div class="icon">X</div>
    </td>
  </tr>
</table>

Is there a way to stop myself from accidentally clicking twice on the same tile?

Answer №1

Similar questions

In what rare scenarios does JS in string concatenation within insertAdjacentHTML fail to evaluate?

How can I make the expired date display in red color in a JavaScript date property?

Prevent Chrome extension from triggering HTTP authentication popup (digest)

nth-child selector causing tbody element to break

Is it possible to implement the same technique across various child controllers in AngularJS?

What is the best way to combine two arrays and generate a new array that includes only unique values, similar to a Union

You need to click the form submit image twice in order to make it work

AngularJs setPristine() not resetting the invalid status of a form

Extract the "_id" value from the array in the v-for loop and then store and reuse it in the data object // using vue-cli

My goal is to retrieve the top three highest rated products

Are you searching for a stylish tabbed navigation menu design?

Customize the styling of an individual 'LI' item within an array by utilizing Jquery

Generate a dynamic add to cart section for every last configurable choice, assisting with this task

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

I'm encountering an issue in Atom where it says "Module 'editorconfig' cannot be found."

Encountering a "self is not defined" error while utilizing the Jodti-React text editor within a Next.js project

Discovering the process of extracting a date from the Date Picker component and displaying it in a table using Material-UI in ReactJS

The use of `preventDefault()` in React for the `onCopy` event is ineffective

I'm encountering an issue with VS Code where it is unable to identify ejs tags within my project

Chrome isn't showing the Background Image