Back to Setup Page

Event Listeners

Before JavaScript, websites used to be built with only HTML and CSS. You could maybe click a button and go to another page, but that’s about it. Now, we can do so much more thanks to JavaScript!

Tour the Existing HTML Code

We will be using a new practice replit to practice these skills before we implement them in our project. Go ahead and fork this replit to get started.

Look at all three files and try to answer these questions.

• How many HTML elements are creating the elements that appear in the browser?
• Which HTML element already has a class on it? What would be a good name for a class on the other elements?

Accessing an HTML Element with JavaScript

We know variables can store information to reference later. Variables can also reference parts of the HTML we’ve written using the JavaScript method document.querySelector to access that element. For example, if we want a variable to represent the h1 heading at the top of our page, we need to do two things:

1. Add a class to the h1 element in the HTML.
2. Use the JavaScript method document.querySelector to access that element.

Here’s how that looks in practice:

<!-- HTML code -->
<h1 class="heading">Puppy Facts</h1>

// JS code
var title = document.querySelector('.heading');

console.log(title.innerText);
// "Puppy Facts" will print out to the console

If you look the script.js file in our practice replit, you’ll notice that those two lines of code are already in there.

• What happens when you run the code?
• What do you think line 10 is doing?

For the first time today, we have our JavaScript “talking to” our HTML code! This is exciting stuff! Go ahead and follow the directions in your script.js file to create a variable for every HTML element, console.log the values, and then reassign the values.

Event Listeners

In JavaScript, an event listener is a way to set up code to run only when a very specific thing happens. Right now, all of our content changes immediately when the page loads. We want the content to only change when the user clicks the button. That’s an event listener – you’ll tell the code to listen for a click on a specific button on the page, then run the code that changes the content.

Here’s how that looks in practice:

<!-- HTML code -->
<h1 class="header">Puppy Facts</h1>
<button>Change the topic!</button>

// JS code
var title = document.querySelector('.header');
var btn = document.querySelector('button');

btn.addEventListener('click', function () {
  title.innerText = "Kitten Facts";
})

Now that we moved the reassignment of the value on the title inside of the event listener, that code will only run after the user clicks on the button. BOOM! We have an interactive webpage.

JavaScript Event Listeners Summary

• We can access an HTML element using the document.querySelector JavaScript method.
• Event listeners allow us to wait for a user action to change something on the page.
  

Next Section: Interactive Buttons