Javascript "removeEventListener" not working

Question

I've tried troubleshooting my code using console.log and seeing if it will run, but it seems like it just bypasses the the removeEventListeners. I've had peers check my code and not understand what the problem is. Javascript:

function useCodelock(){
if (one == 1 && nine == 1 && five == 1 & seven == 1 && two == 1 && ninetwo == 1){
    document.getElementById("main-view").style.backgroundImage="url('images/gray.png')";
    document.getElementById("1").removeEventListener("click", removeImg);
    document.getElementById("6").removeEventListener("click", removeImg);
    document.getElementById("9").removeEventListener("click", removeImg);
    document.getElementById("12").removeEventListener("click", removeImg);
    document.getElementById("14").removeEventListener("click", removeImg);
    document.getElementById("21").removeEventListener("click", removeImg);
    document.getElementById("34").removeEventListener("click", removeImg);
    document.removeEventListener("click", removeImg);
}else{
    alert("You Must Find The Code To Use The Lock.");
}
}

HTML:

<div class="main-view-cont">
        <div class="main-view" id="main-view">
            <div class="grid-item"><img src="" id="1" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="images/9.png" id="6" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="images/5.png" id="9" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="" id="12" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="images/keypad.png" id="14" onclick="useCodelock()"></div>
            <div class="grid-item"><img src="" id="21" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="" id="34" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item2"><img src="" id="i1" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i2" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i3" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i4" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i5" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i6" class="opacity1"/></div>
        </div>
    </div>

Answer 1

You need to unbind the onclick function by setting it to null instead of using removeEventListener.

function myFunction() {
  console.log('unbind me');
  // if you want to unbind the function
  document.getElementById("button").onclick = null;
  // if you want to assign a new unction.
  document.getElementById("button").onclick = newFunction;
  
}

function newFunction() {
  console.log("hello new");
}

<button id="button" onclick="myFunction()">
  unbind me
</button>

You are trying to remove an eventlistener that is not present, because it is never set by addEventListener. You have an onclick listener that is set on the DOM, so you need to unbind that function by setting it to null.

Answer 2

A call like removeListener("click", myFunc, true); will only remove a listener that was added using addListener("click", myFunc, true);. Here is an example:

var flag = true;

function toggle() {
  if (flag) document.getElementById("1").addEventListener("click", removeImg);
  else document.getElementById("1").removeEventListener("click", removeImg);
  flag = !flag;
}

function removeImg() {
  console.log("Clicked");
}

document.getElementById("toggle").addEventListener("click", toggle);

<button id="1">Test</button>
<button id="toggle">Toggle</button>

Here is a list of things you should check if it still doesn't work:

• Use the same function in the addEventListener as in the removeListener (() => {} is not the same as () => {})
• Use the same useCapture value (both need to be true or both need to be false)
• Check that you are removing the listener from the correct element
• Check that the listener has only been added once to the element

Answer 3

removeEventListener can only remove listeners that were added with addEventListener. If you use onclick attributes, you need to assign to that property.

function useCodelock() {
  if (one == 1 && nine == 1 && five == 1 & seven == 1 && two == 1 && ninetwo == 1) {
    document.getElementById("main-view").style.backgroundImage = "url('images/gray.png')";
    document.getElementById("1").onclick = null;
    document.getElementById("6").onclick = null;
    document.getElementById("9").onclick = null;
    document.getElementById("12").onclick = null;
    document.getElementById("14").onclick = null;
    document.getElementById("21").onclick = null;
    document.getElementById("34").onclick = null;
    document.onclick = null;
  } else {
    alert("You Must Find The Code To Use The Lock.");
  }
}