Unable to remove an event listener

Question

Ok so I have a div with an animation:

var x = true;

function dynamicTaskbar(thumb) {
		function anim1() {
			thumb.style.backgroundColor = "green";
		}
		function anim2() {
			thumb.style.backgroundColor = "blue";
		}
		if (x === false) {
			thumb.style.backgroundColor = "red";
			thumb.removeEventListener("mouseover", anim1);
			thumb.removeEventListener("mouseleave", anim2);
      x = true;
		} else {
			thumb.style.backgroundColor = "blue";
			thumb.addEventListener("mouseover", anim1);
			thumb.addEventListener("mouseleave", anim2);
      x = false;
		}
	}

	//Create window's thumbnail for taskbar
	var thumbnail = document.createElement("div");
	thumbnail.setAttribute("class", "thumbnail");
	taskbar.append(thumbnail);
	taskbar.style.width = taskbar.style.width + thumbnail.style.width + "px";
	thumbnail.addEventListener("mousedown", function() {
		dynamicTaskbar(thumbnail);
	});

#taskbar {
  background-color: red;
  border: solid 1px black;
  
  width: 50px;
  height: 30px;
}

.thumbnail {
  width: 50px;
  height: 30px;
  border: solid 1px black;
}

<div id="taskbar"></div>

By default, the div is red.

When it is clicked:

• If x is true, it becomes false and the div turns blue. Two event listeners, mouseover (the div becomes green) and mouseleave (the div becomes red again) are added.
• If x is false, it becomes true and the div turns red. But here is my problem: both event listeners (mouseover and mouseleave) are suppose to be removed, but it doesn't work. I searched over the Internet but found nothing that fixed my problem.

Any help?

Answer 1

The solution for this problem is extracting the anim1() and anim2() funtions from the dynamicTaskbar() function.

Since both functions are located inside the dynamicTaskbar() function they are created again and again with each execution of the function causing the instances to be different then the initial ones.

If for example in the first execution (1st click) of dynamicTaskbar() the "object id" of anim1() will be "1" and in the second execution it will be "2". Therefore when you're trying to remove the listener you're actually trying to remove it for a different object reference.

Take a look at the example:

var x = true;

function anim1(thumb) {
  thumbnail.style.backgroundColor = "green";
}
function anim2(thumb) {
  thumbnail.style.backgroundColor = "blue";
}
    
function dynamicTaskbar(thumb) {
		if (x === false) {
			thumbnail.style.backgroundColor = "red";
			thumbnail.removeEventListener("mouseover", anim1);
			thumbnail.removeEventListener("mouseleave", anim2);
      x = true;
		} else {
			thumbnail.style.backgroundColor = "blue";
			thumbnail.addEventListener("mouseover", anim1);
			thumbnail.addEventListener("mouseleave", anim2);
      x = false;
		}
	}

	//Create window's thumbnail for taskbar
	var thumbnail = document.createElement("div");
	thumbnail.setAttribute("class", "thumbnail");
	taskbar.append(thumbnail);
	taskbar.style.width = taskbar.style.width + thumbnail.style.width + "px";
	thumbnail.addEventListener("mousedown", function() {
		dynamicTaskbar(thumbnail);
	});

#taskbar {
  background-color: red;
  border: solid 1px black;
  
  width: 50px;
  height: 30px;
}

.thumbnail {
  width: 50px;
  height: 30px;
  border: solid 1px black;
}

<div id="taskbar"></div>