Preventing a Click Event from Firing in JavaScript DOM

Question

Preventing a Click Event from Firing in JavaScript DOM

Is there a way to deactivate my buttons once a certain condition is met? Whenever the score reaches 5 on either side, the game just keeps going without displaying the final score. I attempted using a while loop, but it caused crashes. Is there a simple method similar to jQuery for disabling the buttons?

const rock = document.querySelector('.rock');
const paper = document.querySelector('.paper');
const scissors = document.querySelector('.scissors');
const h3 = document.querySelector('h3');
const pscore = document.querySelector('#pscore');
const cscore = document.querySelector('#cscore');
let computerScore = 0;
let playerScore = 0;

function computerPlay() {
    var choice = Math.floor(Math.random() * 3 ) + 1; //generate a number 1-3 to find computer choice
    if(choice == 1) {
        return 'rock';
    }
    else if(choice == 2) {
        return 'paper';
    }
    else {
        return 'scissors'

    }
} 

let result; // Is there a simpler way to write this code?

    rock.addEventListener('click', () => {
        if(computerPlay() == 'rock') {
            result = `The computer chose rock and you chose rock! It's a tie! No change in score.`;
            h3.textContent = result;
            
        }
        else if(computerPlay() == 'paper') {
            result = `The computer chose paper and you chose rock! You lose! Computer Score +1!`;
            h3.textContent = result;
            computerScore++;
            cscore.textContent = computerScore;

     
        }
        else {
            result = `The computer chose scissors and you chose rock! You win! Player Score +1!`; 
            h3.textContent = result;
            playerScore++;
            pscore.textContent = playerScore;

        }
    });

    let playerPaper = paper.addEventListener('click', () => {
        if(computerPlay() == 'paper') {
            result = `The computer chose paper and you chose paper! It's a tie!`;
            h3.textContent = result;    
        }
        else if(computerPlay() == 'scissors') {
            result = `The computer chose scissors and you chose paper! You lose!`;
            h3.textContent = result;
            computerScore++;
            cscore.textContent = computerScore;
        }
        else {
            result = `The computer chose rock and you chose paper! You win!`; 
            h3.textContent = result;
            playerScore++;
            pscore.textContent = playerScore;
        }
        
    });

    let playerScissors = scissors.addEventListener('click', () => {
        if(computerPlay() == 'scissors') {
            result = `The computer chose scissors and you chose scissors! It's a tie!`;
            h3.textContent = result;    
        }
        else if(computerPlay() == 'rock') {
            result = `The computer chose rock and you chose scissors! You lose!`;
            h3.textContent = result;
            computerScore++;
            cscore.textContent = computerScore;
        }
        else {
            result = `The computer chose paper and you chose scissors! You win!`; 
            h3.textContent = result;
            playerScore++;
            pscore.textContent = playerScore;
        }
    })

function playGame(computerChoice) {
    computerChoice = computerPlay();
    if(playerScore == 5) {
        h3.textContent = `The score is 5 to ${computerScore}! You win!`;
    }
    else if(computerScore == 5) {
        h3.textContent = `The score is 5 to ${playerScore}! The computer wins!`;
    }
    
}

The functionality works smoothly except for the 'end game' feature. Any help or feedback would be greatly appreciated!

javascript html css dom

Answer 1

Answer №1

Ways to Deactivate a "Click" Event

The feedback in the comments provides some clever suggestions for enhancing your game. It might be beneficial to explore those ideas. However, if you are interested in disabling click events, there are various approaches you can take.

1. Implement a disabled attribute on your button.

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.disabled = true
}

<button id="myClicker">Click</button>

2. Apply the CSS property pointer-events: none;

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.addEventListener("click",function(){console.log("hi")})
  button.style.pointerEvents = "none";
}

<button id="myClicker">Click</button>

The second method is suitable when informing the user that the button is inactive is unnecessary.

3. Use Prevent Default event.

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.addEventListener("click",function(e){
    e.preventDefault;
  })
}

<button id="myClicker">Click</button>

4. Eliminate Event listener.

document.getElementById("yourButtonId").removeEventListener("Click", yourFunctinoNameHere);

Answer 2

Ways to Deactivate a "Click" Event

The feedback in the comments provides some clever suggestions for enhancing your game. It might be beneficial to explore those ideas. However, if you are interested in disabling click events, there are various approaches you can take.

1. Implement a disabled attribute on your button.

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.disabled = true
}

<button id="myClicker">Click</button>

2. Apply the CSS property pointer-events: none;

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.addEventListener("click",function(){console.log("hi")})
  button.style.pointerEvents = "none";
}

<button id="myClicker">Click</button>

The second method is suitable when informing the user that the button is inactive is unnecessary.

3. Use Prevent Default event.

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.addEventListener("click",function(e){
    e.preventDefault;
  })
}

<button id="myClicker">Click</button>

4. Eliminate Event listener.

document.getElementById("yourButtonId").removeEventListener("Click", yourFunctinoNameHere);

Answer 3

Answer №2

Greetings to Charles. It seems that, as mentioned by @StackSlave, repeatedly calling the computerPlay() function may lead to skewed results, potentially favoring the final else condition in each button scenario. While this is a logical error, the program will still execute.

Your implementation involves extensive functionality within onclick events, with little consideration for an enable indicator. To address this, I have split the program into two components:

Round
Ui

The Round component manages user and computer selections, along with scoring updates. On the other hand, the Ui component handles button interactions for making choices during a round, displaying outputs, updating scores, and potentially ending the game. Additionally, there's a feature to reset the game in the Ui, allowing for a fresh start. Notably, I've organized these functionalities into objects instead of standalone functions to facilitate tracking states. Furthermore, it might be beneficial to provide constants such as rock, paper, player score, etc., directly to the Ui constructor rather than relying on global variables.

const rock = document.querySelector(".rock");
const paper = document.querySelector(".paper");
const scissors = document.querySelector(".scissors");
const h3 = document.querySelector("h3");
const pscore = document.querySelector("#pscore");
const cscore = document.querySelector("#cscore");

const NO_SELECTION = -1;
const SELECT_ROCK = 0;
const SELECT_PAPER = 1;
const SELECT_SCISSORS = 2;

class Round {
  constructor() {
    this.playerChoice = NO_SELECTION;
    this.computerChoice = NO_SELECTION;
  }

  // Rest of the methods from the original code goes here
}

class Ui {
  // Constructor and other methods from the original code can be added here
}

// Initializing the game interface
const gameInterface = new Ui();

Answer 4

Greetings to Charles. It seems that, as mentioned by @StackSlave, repeatedly calling the computerPlay() function may lead to skewed results, potentially favoring the final else condition in each button scenario. While this is a logical error, the program will still execute.

Your implementation involves extensive functionality within onclick events, with little consideration for an enable indicator. To address this, I have split the program into two components:

Round
Ui

The Round component manages user and computer selections, along with scoring updates. On the other hand, the Ui component handles button interactions for making choices during a round, displaying outputs, updating scores, and potentially ending the game. Additionally, there's a feature to reset the game in the Ui, allowing for a fresh start. Notably, I've organized these functionalities into objects instead of standalone functions to facilitate tracking states. Furthermore, it might be beneficial to provide constants such as rock, paper, player score, etc., directly to the Ui constructor rather than relying on global variables.

const rock = document.querySelector(".rock");
const paper = document.querySelector(".paper");
const scissors = document.querySelector(".scissors");
const h3 = document.querySelector("h3");
const pscore = document.querySelector("#pscore");
const cscore = document.querySelector("#cscore");

const NO_SELECTION = -1;
const SELECT_ROCK = 0;
const SELECT_PAPER = 1;
const SELECT_SCISSORS = 2;

class Round {
  constructor() {
    this.playerChoice = NO_SELECTION;
    this.computerChoice = NO_SELECTION;
  }

  // Rest of the methods from the original code goes here
}

class Ui {
  // Constructor and other methods from the original code can be added here
}

// Initializing the game interface
const gameInterface = new Ui();

Answer 5

Answer №3

I prefer not to disable anything, but rather add and remove classes as needed. Take a look at this simple game of RockPaperScissors that I've created. There's a neat little library included above the line that says // magic under here. You might pick up some tips from it:

//<![CDATA[
/* js/external.js */
// Code for RockPaperScissors game goes here
]]>

*{
  /* CSS code for styling elements goes here */
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale=1, user-scalable=no' />
    <title>Rock, Paper, Scissors</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  // HTML structure for the game interface goes here
</body>
</html>

Answer 6

I prefer not to disable anything, but rather add and remove classes as needed. Take a look at this simple game of RockPaperScissors that I've created. There's a neat little library included above the line that says // magic under here. You might pick up some tips from it:

//<![CDATA[
/* js/external.js */
// Code for RockPaperScissors game goes here
]]>

*{
  /* CSS code for styling elements goes here */
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale=1, user-scalable=no' />
    <title>Rock, Paper, Scissors</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  // HTML structure for the game interface goes here
</body>
</html>

Preventing a Click Event from Firing in JavaScript DOM

Answer №1

Ways to Deactivate a "Click" Event

1. Implement a disabled attribute on your button.

2. Apply the CSS property pointer-events: none;

3. Use Prevent Default event.

4. Eliminate Event listener.

Answer №2

Answer №3

Similar questions

cannot display static css files in an express jade template

JavaScript resets the timer whenever the page is refreshed

Employ a variable in order to send json

Material UI Grid Items not stretching to fill the entire available width

Load data onto a webpage using Jquery or json without the need to refresh the page, seamlessly integrate it

What is the most efficient way to use a for loop with JavaScript querySelectorAll to move multiple images?

Webpack automatically prepends "auto/" to script tags in the compiled HTML file

Leverage PHP to retrieve information from a JSON file and integrate it into a dropdown menu on an HTML

What is the process for customizing the color of the focused label in Material UI through styling?

Having trouble with Chrome not setting cookies in a MERN stack application?

Create a typing effect in Javascript that mimics the user's input

What are the time-saving benefits of utilizing semantic X/HTML in CSS development?

Using the combination of z-index and visibility:hidden makes the button go completely undetect

How to vertically align content within a custom div container using Bootstrap 4

When attempting to pass data to a modal, an error occurs due to props being undefined. This results in a TypeError with the message "Cannot

When the toggle enabled div is clicked, the drag event is triggered

How can I stop Html.ListBoxFor from truncating the overflow text of the selected item?

What determines the priority of execution in the execution context stack?

Display information from an array in checkboxes. If the same data appears in another array, the corresponding checkbox in React will be automatically checked

how to quietly change the focus of an element using jquery and css?