There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
Hello so just a quick question. Is there any reason why we could not just put the .removeEventListener’s at the bottom of the two .onclick events. When I tried it, it seemed to do the same thing. Just wondering if there are any problems that can come across with doing it like this.
let door = document.getElementById('door');
let unlock = document.getElementById('unlock');
let lock = document.getElementById('lock');
let sign = document.getElementById('sign');
let cafeImage = document.getElementById('image');
cafeImage.hidden = true;
let openDoor = function() {
door.hidden = true;
cafeImage.hidden = false;
}
let closeDoor = function(){
door.hidden = false;
cafeImage.hidden = true;
}
unlock.onclick = function() {
sign.innerHTML = 'OPEN';
unlock.style.backgroundColor = '#6400e4';
lock.style.backgroundColor = 'lightgray';
}
lock.onclick = function() {
sign.innerHTML = 'CLOSED';
lock.style.backgroundColor = '#6400e4';
unlock.style.backgroundColor = 'lightgray';
}
unlock.addEventListener('click', function(){
door.addEventListener('click', openDoor);
cafeImage.addEventListener('click', closeDoor);
})
lock.addEventListener('click', function (){
door.removeEventListener('click', openDoor);
});
Is there a reason we don’t name the function and then pass the variable as the parameter? It specifically states its not best practice to use anonymous functions as event handlers in the lesson before.
The previous lesson says using an addEventListener (JS people, why you just not call it addEventHandler instead?) isadviisable when there is already an eventhandler assigned to the element in question.
This particular function, however, already does a number of things onlick. Why not just add the openDoor and closeDoor functionality to that list?
This must by one of the things that only start making sense when I comeback to them quite a while later.
Perhaps a silly question, but I find it counterintuitive that the showFortune function removes itself with the .removeEventListener method. Conceptually, am I to imagine it like a one-time function that disappears after running once?
I initially had the method .removeEventListener remove the fortuneSelector function instead, but that didn’t work… Can someone please tell me why that is? Thank you!
The function is not removed, only the active listener property on that object. The function remains as it is. Listeners are extremely resource heavy and can greatly affect performance when left active even after it is no longer useful. We free up memory and clock ticks by removing the listener.
) below.
) to up-vote the contribution!