removeEventListener error happen when building tic tac toe

Question

I am trying to make the tic-tac-toe game. I have tried to use removeEventListener to remove the click after the circle or X are appear in the square so the image will not appear twice. However removeEventListener cause the error:

Uncaught TypeError: Failed to execute ‘removeEventListener’ on ‘EventTarget’: The callback provided as parameter 2 is not an object.

Is there any method to solve the error? It is always my pleasure to have your help.

 var canvas = document.getElementById("canvas");
 const ctx = canvas.getContext('2d');

  var turn = 0;

  var maru_1 = maru_1()

function maru_1(){
 ctx.fillStyle = "skyblue",
 ctx.fillRect(5, 5, 150, 150)
}

var maru_2 = maru_2()

function maru_2(){
ctx.fillStyle = "skyblue",
ctx.fillRect(170, 5, 150, 150);
}

var maru_3 = maru_3()

function maru_3(){
 ctx.fillStyle = "skyblue";
 ctx.fillRect(335, 5, 150, 150);
 }

 var maru_4 = maru_4()

function maru_4(){
 ctx.fillStyle = "skyblue";
 ctx.fillRect(5, 170, 150, 150);
}

 var maru_5 = maru_5()

   function maru_5(){
  ctx.fillStyle = "skyblue";
  ctx.fillRect(170, 170, 150, 150);
   }

  var maru_6 = maru_6()

 function maru_6(){
  ctx.fillStyle = "skyblue";
  ctx.fillRect(335, 170, 150, 150);
 }

 var maru_7 = maru_7()

function maru_7(){
  ctx.fillStyle = "skyblue";
  ctx.fillRect(5, 335, 150, 150);
}

 var maru_8 = maru_8()

function maru_8(){
 ctx.fillStyle = "skyblue";
 ctx.fillRect(170, 335, 150, 150);
}

 var maru_9 = maru_9()

function maru_9(){
  ctx.fillStyle = "skyblue";
  ctx.fillRect(335, 335, 150, 150);
  }

var img = new Image();
img.src = "maru.png";

var img_2 = new Image();
img_2.src = "batsu.png";


 var player = canvas.addEventListener('click', function player(){

  var x = event.screenX;
  var y = event.screenY; 

  var imgTemp;

if(turn%2==0){
 imgTemp = img
} else {
 imgTemp = img_2
}

  if(x<150 && y<190){
    ctx.drawImage(imgTemp, 5, 5, 145, 140)
     turn+=1;    
      return true;
  }else if(x>160 && x<335 && y<190){
      ctx.drawImage(imgTemp, 168, 5, 145, 140)
      turn+=1;
      return true;
  }else if(x>335 && x<470 && y<190){
      ctx.drawImage(imgTemp, 330, 5, 145, 140)
      turn+=1;
      return true;
  }else if(x<160 && y>=175 && y<340){
      ctx.drawImage(imgTemp, 5, 170, 145, 140)
      turn+=1;
      return true;
  }else if(x>170 && x<335 && y>175 && y<340){
      ctx.drawImage(imgTemp, 170, 170, 145, 140)
      turn+=1;
      return true;
  }else if(x>335 &&  x<470 && y>195 && y<340){
      ctx.drawImage(imgTemp, 335, 170, 145, 140)
      turn+=1;
      return true;
  }else if(x<160 && y>340 && y<550){ 
       ctx.drawImage(imgTemp, 5, 335, 145, 140)
       turn+=1;
       return true;
  }else if(x>165 && x<335 && y>340 && y<550){
        ctx.drawImage(imgTemp, 170, 335, 145, 140)
        turn+=1;
        return true;
    }else if(x>335 && x<470 &&  y>340 && y<550){
        ctx.drawImage(imgTemp, 335, 335, 145, 140) 
        turn+=1;
        return true;
        }{
        return false;  
     }

    }, false);
if (player=true){
   canvas.removeEventListener("click",player);
}

canvas dom dom events javascript

Prakhar · Answer

removeEventListener() function expects three parameters. First is the type of event, second is the EventListener function which was originally registered and third is optional options object.
target.removeEventListener(type, listenerFunction, options)

What you are passing as the second parameter in your example is not the original callback function.
In order to remove an event listener, you must use a named function as the callback.
So define your player function beforehand
function player(){ .... }
And use it to register the event listener
canvas.addEventListener('click', player )

And then to remove this
canvas.removeEventListener("click",player)

Riddhijain · Answer

This is because in the callback you're passing var player and not the player function,you can Change the name of the variable

var canvas = document.getElementById("canvas");
 const ctx = canvas.getContext('2d');

  var turn = 0;

  var maru_1 = maru_1()

function maru_1(){
 ctx.fillStyle = "skyblue",
 ctx.fillRect(5, 5, 150, 150)
}

var maru_2 = maru_2()

function maru_2(){
ctx.fillStyle = "skyblue",
ctx.fillRect(170, 5, 150, 150);
}

var maru_3 = maru_3()

function maru_3(){
 ctx.fillStyle = "skyblue";
 ctx.fillRect(335, 5, 150, 150);
 }

 var maru_4 = maru_4()

function maru_4(){
 ctx.fillStyle = "skyblue";
 ctx.fillRect(5, 170, 150, 150);
}

 var maru_5 = maru_5()

   function maru_5(){
  ctx.fillStyle = "skyblue";
  ctx.fillRect(170, 170, 150, 150);
   }

  var maru_6 = maru_6()

 function maru_6(){
  ctx.fillStyle = "skyblue";
  ctx.fillRect(335, 170, 150, 150);
 }

 var maru_7 = maru_7()

function maru_7(){
  ctx.fillStyle = "skyblue";
  ctx.fillRect(5, 335, 150, 150);
}

 var maru_8 = maru_8()

function maru_8(){
 ctx.fillStyle = "skyblue";
 ctx.fillRect(170, 335, 150, 150);
}

 var maru_9 = maru_9()

function maru_9(){
  ctx.fillStyle = "skyblue";
  ctx.fillRect(335, 335, 150, 150);
  }

var img = new Image();
img.src = "maru.png";

var img_2 = new Image();
img_2.src = "batsu.png";

function player(){

  var x = event.screenX;
  var y = event.screenY; 

  var imgTemp;

if(turn%2==0){
 imgTemp = img
} else {
 imgTemp = img_2
}

  if(x<150 && y<190){
    ctx.drawImage(imgTemp, 5, 5, 145, 140)
     turn+=1;    
      return true;
  }else if(x>160 && x<335 && y<190){
      ctx.drawImage(imgTemp, 168, 5, 145, 140)
      turn+=1;
      return true;
  }else if(x>335 && x<470 && y<190){
      ctx.drawImage(imgTemp, 330, 5, 145, 140)
      turn+=1;
      return true;
  }else if(x<160 && y>=175 && y<340){
      ctx.drawImage(imgTemp, 5, 170, 145, 140)
      turn+=1;
      return true;
  }else if(x>170 && x<335 && y>175 && y<340){
      ctx.drawImage(imgTemp, 170, 170, 145, 140)
      turn+=1;
      return true;
  }else if(x>335 &&  x<470 && y>195 && y<340){
      ctx.drawImage(imgTemp, 335, 170, 145, 140)
      turn+=1;
      return true;
  }else if(x<160 && y>340 && y<550){ 
       ctx.drawImage(imgTemp, 5, 335, 145, 140)
       turn+=1;
       return true;
  }else if(x>165 && x<335 && y>340 && y<550){
        ctx.drawImage(imgTemp, 170, 335, 145, 140)
        turn+=1;
        return true;
    }else if(x>335 && x<470 &&  y>340 && y<550){
        ctx.drawImage(imgTemp, 335, 335, 145, 140) 
        turn+=1;
        return true;
        }{
        return false;  
     }

    }
 var player2 = canvas.addEventListener('click', player,false)
if (true){ // put your condition here
   canvas.removeEventListener("click",player);
}

<html>
<head>
</head>
<body>
<canvas id="canvas">
</body>
</html>

Deepak Dixit · Answer

Problem 1: Your code is not readable

Priblem 2: You are re-assigning boolean: true to player inside your if block which is causing the issue with removeEventListener.

If you want to add click listener only once then you can remove the listener inside your player function. I modified your code, take a look:

var canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
var turn = 0;

var img = new Image();
img.src = "maru.png";

var img_2 = new Image();
img_2.src = "batsu.png";

function fillRect(ctx, x, y, w, h) {
    ctx.fillStyle = "skyblue",
    ctx.fillRect(x, y, w, h)
}

function player(event) {
    if (player) {
        canvas.removeEventListener("click", player);
    }

    var x = event.screenX;
    var y = event.screenY;

    var imgTemp;

    if (turn % 2 == 0) {
        imgTemp = img
    } else {
        imgTemp = img_2
    }

    if (x < 150 && y < 190) {
        ctx.drawImage(imgTemp, 5, 5, 145, 140)
        turn += 1;
    } else if (x > 160 && x < 335 && y < 190) {
        ctx.drawImage(imgTemp, 168, 5, 145, 140)
        turn += 1;
    } else if (x > 335 && x < 470 && y < 190) {
        ctx.drawImage(imgTemp, 330, 5, 145, 140)
        turn += 1;
    } else if (x < 160 && y >= 175 && y < 340) {
        ctx.drawImage(imgTemp, 5, 170, 145, 140)
        turn += 1;
    } else if (x > 170 && x < 335 && y > 175 && y < 340) {
        ctx.drawImage(imgTemp, 170, 170, 145, 140)
        turn += 1;
    } else if (x > 335 && x < 470 && y > 195 && y < 340) {
        ctx.drawImage(imgTemp, 335, 170, 145, 140)
        turn += 1;
    } else if (x < 160 && y > 340 && y < 550) {
        ctx.drawImage(imgTemp, 5, 335, 145, 140)
        turn += 1;
    } else if (x > 165 && x < 335 && y > 340 && y < 550) {
        ctx.drawImage(imgTemp, 170, 335, 145, 140)
        turn += 1;
    } else if (x > 335 && x < 470 && y > 340 && y < 550) {
        ctx.drawImage(imgTemp, 335, 335, 145, 140)
        turn += 1;
    }
}

fillRect(ctx, 5, 5, 150, 150);
fillRect(ctx, 170, 5, 150, 150);
fillRect(ctx, 335, 5, 150, 150);
fillRect(ctx, 5, 170, 150, 150);
fillRect(ctx, 170, 170, 150, 150);
fillRect(ctx, 335, 170, 150, 150);
fillRect(ctx, 5, 335, 150, 150);
fillRect(ctx, 170, 335, 150, 150);
fillRect(ctx, 335, 335, 150, 150);

canvas.addEventListener('click', player);

removeEventListener error happen when building tic tac toe

3 Answers

Add your own answers!

Ask a Question