CODEWITHSUNDEEP
javascript
Parham
Parham

Reputation: 224

How do I disable the click event once a certain condition is met?

I am making a rock, paper, scissors game. When either "You Score" or "Computer Score" reaches 3, I want the click event to disable. I'm not sure whether I need to disable the "rock" button or remove the click event. Either way, when the score reaches 3, I no longer want the "rock" button to be clickable, meaning that I don't want either score to go higher after it reaches 3.

function computerPlay(){
  let values = ['Rock', 'Paper', 'Scissors'],
  valueToUse = values [Math.floor(Math.random()* values.length)];
  return valueToUse;
};

const rock = document.querySelector('#rock');
let player = document.querySelector('.playerScore', playerScore = 0);
let computer = document.querySelector('.computerScore', computerScore = 0);
let finalResult = document.querySelector('.finalResult');

rock.addEventListener('click', function() {
  
  let comp = computerPlay()

  if (comp === 'Rock') {
    computer.textContent = `Computer Score: ${computerScore +=0}`
    player.textContent = `Your Score: ${playerScore +=0}`
  
  } else if (comp === 'Paper') {
    computer.textContent = `Computer Score: ${computerScore +=1}`
    player.textContent = `Your Score: ${playerScore +=0}`
    
  } else if (comp === 'Scissors') {
    computer.textContent = `Computer Score: ${computerScore +=0}`
    player.textContent = `Your Score: ${playerScore +=1}`
  }
    if (playerScore === 3){
     finalResult.textContent = "You Won";   
  }
    else if (computerScore === 3){
     finalResult.textContent = "You Lost";  
  }
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My javascript</title>
    <link rel="stylesheet" href="javascript.css">
  </head>
  <body>
    <main>
    <div class="wrapper">
      <h1>Rock, Paper, Scissors!</h1>
      <h2 id="choose">Choose:</h2>
    </div>
    <div class="container">
        <img id="rock" src="https://static.thenounproject.com/png/477914-200.png">
      </button>
    </div>
    <div class="wrapper">
      <p class='computerScore'></p>
      <p class='playerScore'></p>
    </div>
    <div class="wrapper">
      <p class='finalResult'></p>
    </div>
    </main>
    <script src="javascript.js"></script>
</html>

Upvotes: 0

Views: 1869

Answers (3)

Sudhir kumar
Sudhir kumar

Reputation: 43

You can easily do this with CSS. Pointer Event is the css property helps enable and disable pointer event.

For example

If(condition) {
// for disable
document.getElementById('id').style.pointerEvent = 'none';   
else {
for enable
document.getElementById('id').style.pointerEvent = 'auto';
}

visit this link for more info https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Upvotes: 0

Shail_bee
Shail_bee

Reputation: 509

As @Antoine mentioned, use removeEventListener to detach the callback from your click event. Adding this answer just to showcase this in action.

function computerPlay(){
  let values = ['Rock', 'Paper', 'Scissors'],
  valueToUse = values [Math.floor(Math.random()* values.length)];
  return valueToUse;
};

const rock = document.querySelector('#rock');
let player = document.querySelector('.playerScore', playerScore = 0);
let computer = document.querySelector('.computerScore', computerScore = 0);
let finalResult = document.querySelector('.finalResult');

rock.addEventListener('click', choose);
function choose() {
  
  let comp = computerPlay()

  if (comp === 'Rock') {
    computer.textContent = `Computer Score: ${computerScore +=0}`
    player.textContent = `Your Score: ${playerScore +=0}`
  
  } else if (comp === 'Paper') {
    computer.textContent = `Computer Score: ${computerScore +=1}`
    player.textContent = `Your Score: ${playerScore +=0}`
    
  } else if (comp === 'Scissors') {
    computer.textContent = `Computer Score: ${computerScore +=0}`
    player.textContent = `Your Score: ${playerScore +=1}`
  }
    if (playerScore === 3){
     finalResult.textContent = "You Won";   
     rock.removeEventListener("click", choose);
  }
    else if (computerScore === 3){
     finalResult.textContent = "You Lost";
     rock.removeEventListener("click", choose);
  }
}
<html>
  <head>
    <meta charset="utf-8">
    <title>My javascript</title>
    <link rel="stylesheet" href="javascript.css">
  </head>
  <body>
    <main>
    <div class="wrapper">
      <h1>Rock, Paper, Scissors!</h1>
      <h2 id="choose">Choose:</h2>
    </div>
    <div class="container">
        <img id="rock" src="https://static.thenounproject.com/png/477914-200.png">
      </button>
    </div>
    <div class="wrapper">
      <p class='computerScore'></p>
      <p class='playerScore'></p>
    </div>
    <div class="wrapper">
      <p class='finalResult'></p>
    </div>
    </main>
</html>

Upvotes: 2

antoinestv
antoinestv

Reputation: 3306

You could name your callback (declare your callback outside), to be able to call removeEventListener later.

E.g:

// ...

rock.addEventListener("click", onClick);

function onClick() {
  let comp = computerPlay();

  if (comp === "Rock") {
    computer.textContent = `Computer Score: ${(computerScore += 0)}`;
    player.textContent = `Your Score: ${(playerScore += 0)}`;
  } else if (comp === "Paper") {
    computer.textContent = `Computer Score: ${(computerScore += 1)}`;
    player.textContent = `Your Score: ${(playerScore += 0)}`;
  } else if (comp === "Scissors") {
    computer.textContent = `Computer Score: ${(computerScore += 0)}`;
    player.textContent = `Your Score: ${(playerScore += 1)}`;
  }
  if (playerScore === 3) {
    finalResult.textContent = "You Won";
    // Here I remove the event listener:
    rock.removeEventListener("click", onClick);
  } else if (computerScore === 3) {
    finalResult.textContent = "You Lost";
    // Same here
    rock.removeEventListener("click", onClick);
  }
}

// ...

Upvotes: 5

Related Questions