Calling .addEventListener(); inside a function fails to actually create said event listener

I’ve been using the line canvas.addEventListener("click", funcName, false); without issue for my program, but recently I decided that I would sometimes like to remove said event listener and replace it with another one canvas.addEventListener("click", difFuncName, false); so I created 4 functions that could be called by my other java script files. 2 functions to add both these event listeners and 2 others that would remove them.

What happens is the function that adds the new event listener calling difFuncName successfully creates the event listener and after the programs through with the listener it successfully calls the remover function. But the problem lies in the fact that the first event listener which is now being called inside of a function is no longer created.

I should note here that before I put the first listener inside it’s own function I only had a function with the line canvas.removeEventListener("click", funcName,false); which also failed to remove the event listener meaning that both event listeners were running their functions.

I’ve also added console.log(“checking”); inside each function to make sure they are actually being executed and all 4 do get run.

So my question is why does one event listener work completely fine when created and removed inside a function but the other one can’t be created or removed with a function.

for more context here’s the code for my 4 functions

function addEventListener(){
    canvas.addEventListener("click", funcName ,false);
}
function removecanvasListener(){
    canvas.removeEventListener("click", funcName,false);
}
function addUnitEventListener(){
    canvas.addEventListener("click", difFuncName,false);
}
function removeUnitEventListener(){
    canvas.removeEventListener("click", difFuncName,false);
}

inside javascript listenerFile

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x1;

function funcName(event){
    x1 = event.pageX;
    console.log("doing something on click");
}
function difFuncName(event){ 
    console.log("doing something else on click");
}

function addEventListener(){
    canvas.addEventListener("click", funcName ,false);
}
function removecanvasListener(){
    canvas.removeEventListener("click", funcName,false);
}
function addUnitEventListener(){
    canvas.addEventListener("click", difFuncName,false);
}
function removeUnitEventListener(){
    canvas.removeEventListener("click", difFuncName,false);
}

Inside javascript file changingEventListener

function newListenerNeeded(){
    removecanvasListener();
    addUnitEventListener();
}

Inside javascript file ranafterListenerFile

addEventListener();

ranafterListenerFile actually loads after listenerFile.

Answer

As Answered in the comments to my question. my problem lies in the fact that all of my javascript code is called in the html at the bottom. because they are all called together they get treated as one large file. My issue spawns in the fact that I was resetting the canvas element as well as the listener later on when I tried to create another canvas object.

Advertisement

Answer