CODEWITHSUNDEEP
javascriptaddeventlistener
Hye Shusho
Hye Shusho

Reputation: 309

Why is my removeEventListener not working?

My javascript code, thanks in advance (let me know if you need the html too but its basically the tags, it's a game where the players just click until it reaches a certain number, and whoever reaches first wins. I'm trying to stop the other player from clicking if the game has already been won: 

var player1Score=0;
var player2Score=0;

function p1Function(){

if(player1Score==document.querySelector("input").value)
   return;

++player1Score;
document.querySelector("#pOneScore").innerHTML=player1Score.toString();

if(player1Score==document.querySelector("input").value)
    document.querySelector("#pOneScore").style.color="green";
}

function p2Function(){

if(player2Score==document.querySelector("input").value)
{
    document.querySelector(".playerOne").removeEventListener("click",    
    p1Function);
    return;
}
player2Score++;
document.querySelector("#pTwoScore").innerHTML=player2Score.toString();

if(player2Score==document.querySelector("input").value)
    document.querySelector("#pTwoScore").style.color="green";
}

function resetFunction(){
    document.querySelector("input").value=5;
    document.querySelector("#pOneScore").style.color="black";
    document.querySelector("#pTwoScore").style.color="black";
    player1Score=0;
    player2Score=0;
    document.querySelector("#pOneScore").innerHTML=player1Score.toString();
    document.querySelector("#pTwoScore").innerHTML=player2Score.toString();
}


document.querySelector(".playerOne").addEventListener("click", p1Function);
document.querySelector(".playerTwo").addEventListener("click", p2Function);
document.querySelector(".reset").addEventListener("click", resetFunction);

Here is the HTML code as requested:

<body>
<strong><span id="pOneScore">0</span> to <span id="pTwoScore">0</span>
</strong>
<br>
<br>
<p>Playing To:</p> <span id="playing_to"></span>

<input type="text" name="score" value="5"></input>
<button class="playerOne">Player One</button>
<button class="playerTwo">Player Two</button>
<button class="reset">Reset</button>

<script src="scorekeeper_js"></script>
</body>

Upvotes: 0

Views: 166

Answers (3)

Abhishek
Abhishek

Reputation: 1477

Once the 1st person clicks the 5, times then in the person one handler, the click handler for person two was not removed. Hence the person two was able to click. I think you hand missed to remove the click in 'p1Function()'. Adding the below lines in 'p1Function()' would solve your problem:

if(player1Score==document.querySelector("input").value)
{
    document.querySelector(".playerTwo").removeEventListener("click",    
    p2Function);
    return;
}

Upvotes: 0

mudin
mudin

Reputation: 2852

You didn't remove listener in one of your onclick functions.

function p1Function() {
  var maxScore = document.querySelector("input").value;

  player1Score++;

  if (player1Score == maxScore) {
    document.querySelector("#pOneScore").style.color = "green";
    document.querySelector(".playerTwo").removeEventListener("click",
      p2Function);
    document.querySelector("#pOneScore").innerHTML = player1Score.toString();
  } else if (player1Score < maxScore) {
    document.querySelector("#pOneScore").style.color = "black";
    document.querySelector("#pOneScore").innerHTML = player1Score.toString();
  }
}
function p2Function() {
  var maxScore = document.querySelector("input").value;

  player2Score++;
  if (player2Score == maxScore) {
    document.querySelector("#pTwoScore").style.color = "green";
    document.querySelector(".playerOne").removeEventListener("click",
      p1Function);
    document.querySelector("#pTwoScore").innerHTML = player2Score.toString();
  } else if (player2Score < maxScore) {
    document.querySelector("#pTwoScore").style.color = "black";
    document.querySelector("#pTwoScore").innerHTML = player2Score.toString();
  }
}

You also have to add listeners back in reset():

function resetFunction() {
...
  document.querySelector(".playerOne").addEventListener("click", p1Function);
  document.querySelector(".playerTwo").addEventListener("click", p2Function);
}

Here is working jsfiddle code: https://jsfiddle.net/1we2ydza/1/

Upvotes: 1

Sagar V
Sagar V

Reputation: 12478

Check it now

var player1Score=0;
var player2Score=0;

function p1Function(){

if(player1Score==parseInt(document.querySelector("input").value)){
   document.querySelector(".playerTwo").removeEventListener("click",    
    p2Function);
   return;
 }

++player1Score;
document.querySelector("#pOneScore").innerHTML=player1Score.toString();

if(player1Score==document.querySelector("input").value)
    document.querySelector("#pOneScore").style.color="green";
}

function p2Function(){

if(player2Score==parseInt(document.querySelector("input").value))
{
    document.querySelector(".playerOne").removeEventListener("click",    
    p1Function);
    return;
}
player2Score++;
document.querySelector("#pTwoScore").innerHTML=player2Score.toString();

if(player2Score==document.querySelector("input").value)
    document.querySelector("#pTwoScore").style.color="green";
}

function resetFunction(){
    document.querySelector("input").value=5;
    document.querySelector("#pOneScore").style.color="black";
    document.querySelector("#pTwoScore").style.color="black";
    player1Score=0;
    player2Score=0;
    document.querySelector(".playerOne").addEventListener("click", p1Function);
    document.querySelector(".playerTwo").addEventListener("click", p2Function);

    document.querySelector("#pOneScore").innerHTML=player1Score.toString();
    document.querySelector("#pTwoScore").innerHTML=player2Score.toString();
}


document.querySelector(".playerOne").addEventListener("click", p1Function);
document.querySelector(".playerTwo").addEventListener("click", p2Function);
document.querySelector(".reset").addEventListener("click", resetFunction);
<body>
<strong><span id="pOneScore">0</span> to <span id="pTwoScore">0</span>
</strong>
<br>
<br>
<p>Playing To:</p> <span id="playing_to"></span>

<input type="text" name="score" value="5" />
<button class="playerOne">Player One</button>
<button class="playerTwo">Player Two</button>
<button class="reset">Reset</button>

<script src="scorekeeper_js"></script>
</body>

Upvotes: 0

Related Questions