Learn
DOM Events with JavaScript
Removing Event Handlers

The .removeEventListener() method is used to reverse the .addEventListener() method. This method stops the event target from “listening” for an event to fire when it no longer needs to. .removeEventListener() also takes two arguments:

  1. The event type as a string
  2. The event handler function

Check out the syntax of a .removeEventListener() method with a click event:

eventTarget.removeEventListener('click', eventHandlerFunction);

Because there can be multiple event handler functions associated with a particular event, .removeEventListener() needs both the exact event type name and the name of the event handler you want to remove. If .addEventListener() was provided an anonymous function, then that event listener cannot be removed.

Instructions

1.

Check out this website that shows your daily fortune. But the website is broken! You should only be able to see your daily fortune once, but you will see that you can keep pressing the button to get a new fortune. You need to use the .removeEventListener() method after a fortune is displayed.

Inside the showFortune() function, add a .removeEventListener() to prevent a new fortune from being displayed when a user tries to click the button element.

Folder Icon

Sign up to start coding

Already have an account?