Stack Overflow Asked by Holly Wong on December 23, 2020
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);
}
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)
Answered by Prakhar on December 23, 2020
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>
Answered by Riddhijain on December 23, 2020
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);
Answered by Deepak Dixit on December 23, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP