Skip to main content

Exercise 34

  • Create the following folder/file structure:
/ex_34
  |-- index.html

index.html​

  • Create a basic HTML document
  • Create a script tag on the document head element
  • Add the following html code
<!DOCTYPE html>
<html>
  <head>
    <title>Events</title>
  </head>
  <body>
    <button id="firstButton">Click Me!!</button>
    <button id="secondButton">Remove event listener</button>
  </body>
</html>
  • Copy and paste the code from exercise 33
  • Add the secondButton id element as shown in the html example
  • Select the secondButton id element using the getElementById method
  • Create a greeting function that will show the alert message that we're using as firstButton event listener
  • Use the greeting function as addEventListener callback
  • Add a new event handler to the secondButton element using onclick
  • Clicking the second button must remove the click listener from the first one
  • At the end the functionality must work this way:
Click first button to see the alert message
Click on the second button to remove the event listener from the first button
Click on the first button again to make sure the event listener is gone and that we're no longer see the alert message
  • If everything is working... CONGRATS!! you're rocking it with events!!