Events: Listen for a Click and Run a Function

The previous lesson wrapped your tagline steps in setTagline. This lesson adds a button and runs a function when someone clicks it, so a visitor can change the tagline on the page.

The concept

Here is your page with setTagline already defining and calling the tagline. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <p class="tagline"></p>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row">
          <li class="skill-card">HTML</li>
          <li class="skill-card">CSS</li>
          <li class="skill-card">JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
    <script>
      const pageOwner = "Your Name";
      const skillCount = 3;
      console.log(pageOwner);
      console.log(skillCount);
      function setTagline(text) {
        const tagline = document.querySelector(".tagline");
        tagline.textContent = text;
        tagline.classList.add("is-set");
      }
      setTagline("Building things for the web");
    </script>
  </body>
</html>

RUN TO SEE YOUR PAGE

The tagline shows. There is no button yet. You will add one in this lesson, then wire a click to a function.

Run this tiny page. Click the button in the preview:

A CLICK CHANGES THE PAGE · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The tagline starts as Building things for the web. After a click it becomes Learning in public. No one edited the HTML by hand between those two states. The script waited for the click, then called a function.

An event is something that happens on the page. A click is one kind of event: a press on an element.

addEventListener is how you attach a listener. You pass the event name as a string, then the function to run when that event happens.

Look at the listener line alone:

changeButton.addEventListener("click", showAltTagline);

The second value in those parentheses is showAltTagline with no trailing (). The values in a call's parentheses are its arguments. Passing the function name without calling it hands the browser the function itself. The browser holds it and calls it later on click.

The syntax

function showAltTagline() {
  setTagline("Learning in public");
}
 
const changeButton = document.querySelector(".change-tagline");
changeButton.addEventListener("click", showAltTagline);

element.addEventListener("click", functionName) listens for a click on that element.

Pass the function by name. Do not put () after the name in that second argument. Parentheses would call it now.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Click</title>
    <style>
      .tagline.is-set {
        color: teal;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h1>Your Name</h1>
    <p class="tagline"></p>
    <button type="button" class="change-tagline btn">Change tagline</button>
    <script>
      function setTagline(text) {
        const tagline = document.querySelector(".tagline");
        tagline.textContent = text;
        tagline.classList.add("is-set");
      }
      function showAltTagline() {
        setTagline("Learning in public");
      }
      setTagline("Building things for the web");
      const changeButton = document.querySelector(".change-tagline");
      changeButton.addEventListener("click", showAltTagline);
    </script>
  </body>
</html>

One button in the markup. One listener. A click changes the tagline.

Common mistakes

You put parentheses on the listener function. This trips up almost everyone the first time. Run this:

PARENTHESES RUN IT TOO EARLY · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The tagline may already say Learning in public before you click. Clicks do nothing useful after that. The line was addEventListener("click", showAltTagline()). The () called showAltTagline while the script was still loading. addEventListener received the return value, not the function. Hand the browser the function: showAltTagline with no parentheses.

You select the wrong button. The contact form already has a Send button. document.querySelector("button") finds the first button in the page, which may not be the one you added. Give your new button a class such as change-tagline, and select that class.

You forget to add the button in the HTML. The script runs document.querySelector(".change-tagline") and gets null. The next line that calls addEventListener fails. The CONSOLE shows a red error mentioning null. Add the button in the markup first, under the tagline and outside the contact form, then select it.

Try it yourself

Give your profile page a button that changes the tagline on click. Confirm each step in the preview.

Run the starting code below. Confirm the tagline under the name already shows and is teal. Confirm there is no change-tagline button yet.
Under the tagline paragraph in the header, add <button type="button" class="change-tagline btn">Change tagline</button>. Keep it outside the contact form. In styles.css, add border: none; to your existing .btn rule. Run it. Confirm the button appears under the tagline and matches your teal button look, without the browser's default border.
In the script, below setTagline(...), add a function showAltTagline that calls setTagline with a different short string. Select .change-tagline into a variable. Call addEventListener("click", showAltTagline) on that button. Run it. Confirm a click updates the tagline.
Click the button again. Confirm the same alternate string stays. This lesson wires one click to one call. Branching between two themes comes next.
Break it on purpose: change the listener to addEventListener("click", showAltTagline()) with parentheses. Run it. Confirm the alternate tagline appears on load (or clicks stop updating as you expect), matching the pass-versus-call mistake. Put the name back without parentheses and confirm clicks work again.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

Your page now responds to a click. The next lesson uses branching so one control can flip the page between two looks.