Get Started

Use this template

event listeners.zip

• Notice how hovering over the button shows a box-shadow and background change. Study the CSS for a moment
• Additionally, look at the HTML. There is an element called ‘show-me’. Find it in DevTools and identify why it does not show up on the page

Now - let’s layer on an event listener

Get event listener set up

We’re going to add on an event listener. This event listener will listen for a click event. When that click happens, we are then going to show the element on the page

First, let’s get started with just making sure the event listener is working. Add this code to your JS file (clear out what’s in there now)

document.querySelector('.btn').addEventListener('click', function(){
    console.log('test testing 1 2');
})

Notice how we used the document.querySelector() method, just as we did last class when we wanted to select an parent element to add HTML to. Anytime you want to select an element on the page, you use this method.

Open up your console. Click on the button. Each time you click, you should see a log statement