JavaScript - 14

JavaScript - 14: Event Listeners (Click Events)

Event listeners let JavaScript respond when something happens on a web page.

For example, JavaScript can react when a visitor clicks a button, types into a form, moves the mouse, or presses a key.

In this lesson, you will make a button respond to a click event and change a message on the page.

Your challenge: Select the button and message, add a click event listener, then change the message text and color when the button is clicked.

What is an event?

An event is something that happens in the browser.

A button click is an event. So is typing a key, submitting a form, or moving the mouse.

JavaScript can listen for these events and run code when they happen.

Select the elements first

Before JavaScript can work with the button or message, it needs to find them in the DOM.

You can select the button with: document.getElementById("action-btn")

And the paragraph with: document.getElementById("message")

It is useful to store those elements in variables:

const button = document.getElementById("action-btn");

const message = document.getElementById("message");

Add an event listener

Once you have the button, you can tell JavaScript to listen for a click:

button.addEventListener("click", function() { ... });

The first argument, "click", tells JavaScript which event to listen for.

The function contains the instructions that should run when that event happens.

The function does not run immediately

When the page loads, JavaScript sets up the event listener and waits.

The code inside the listener only runs after the visitor clicks the button.

This is different from code such as: console.log("Hello"); which runs as soon as JavaScript reaches it.

Change the message text

You already learned about .textContent in the DOM lesson.

Inside the click event, you can write:

message.textContent = "Button was clicked!";

When the button is clicked, the paragraph changes from its original message to the new one.

Change a style with JavaScript

JavaScript can also change inline CSS styles through an element's .style property.

For example: message.style.color = "white";

The property after .style corresponds to a CSS property.

So: message.style.color controls the element's text color.

Put the steps together

The basic pattern is:

button.addEventListener("click", function() { message.textContent = "Clicked!"; });

Read it as: "When this button receives a click, run this function."

Why use addEventListener()?

Event listeners help separate your HTML from your JavaScript.

The HTML provides the button, while JavaScript decides what should happen when the button is used.

This approach becomes especially useful as pages become more interactive.

Experiment: change more than one thing

Inside the event listener, try changing both:

message.textContent

and:

message.style.color

You could also try: message.style.fontWeight = "bold";

Notice that font-weight from CSS becomes fontWeight when used through JavaScript's .style object.

Experiment: change the button too

Because you already have the button stored in a variable, the click handler can change the button itself.

Try: button.textContent = "Clicked!";

After the first click, the button's label will change.

Events can happen more than once

Click the button several times.

The event listener remains attached, so its function runs every time the button is clicked.

If the function always assigns the same text and color, the visible result stays the same after the first click, even though the event continues to run.

Try counting clicks

You can combine events with variables:

let clicks = 0;

Inside the event listener:

clicks = clicks + 1;

Then: message.textContent = `Clicks: ${clicks}`;

Now each click produces a different result because the variable changes.

Why is the button a real <button>?

Using a native HTML button gives visitors built-in keyboard behavior and appropriate button semantics.

For clickable actions, it is usually better to start with the correct HTML element instead of making a paragraph or generic div behave like a button.

Extra challenge: Change the message to "Ready!" after the first click and change the button text to "Click Again".

Good JavaScript habit: Select important DOM elements once, store them in clearly named variables, and then use those variables inside your event listeners. This keeps interactive code easier to read.

const button = document.getElementById("action-btn");
const message = document.getElementById("message");

button.addEventListener("click", function() {
  message.textContent = "Button was clicked! 🎉";
  message.style.color = "white";
});