Functions: Name a Block of Steps and Reuse It

The previous lesson wrote your tagline with three lines in a row. This lesson wraps those lines in a function named setTagline, so you can change the text by calling one name with a new string.

The concept

Here is your page with the tagline already filled by the previous lesson's lines. 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);
      const tagline = document.querySelector(".tagline");
      tagline.textContent = "Building things for the web";
      tagline.classList.add("is-set");
    </script>
  </body>
</html>

RUN TO SEE YOUR PAGE

The tagline shows. The three lines that set it are still written out in full. You are about to name that block of steps.

Run this tiny page and watch the CONSOLE:

DEFINE, THEN CALL · 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 CONSOLE shows Hello from a function. The script first defined a function named sayHello. Defining it did not print anything. Then the script called sayHello(). The call ran the steps inside the braces.

A function is a named block of steps. Writing the definition stores the steps. Writing the name with () runs them.

Now pass a value into the steps:

PASS A VALUE IN · 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 shows Building things for the web. The function is named setTagline. Inside the parentheses of the definition sits text. That name is a parameter: a slot that holds the value you pass when you call the function. The call setTagline("Building things for the web") fills text with that string. The body uses text for textContent.

Call it twice with different strings:

SAME STEPS, NEW TEXT · 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 ends on Second line wins. The same function ran twice. The second call replaced the text from the first. You did not copy the querySelector lines again.

The syntax

function setTagline(text) {
  const tagline = document.querySelector(".tagline");
  tagline.textContent = text;
  tagline.classList.add("is-set");
}
 
setTagline("Building things for the web");

function name(parameter) { ... } defines the function.

name(value) calls it. The value lands in the parameter for that run.

Defining a function does not run it. The call does.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>setTagline</title>
    <style>
      .tagline.is-set {
        color: teal;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h1>Your Name</h1>
    <p class="tagline"></p>
    <script>
      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>

One function. One call. The tagline text comes from the string passed in.

Common mistakes

You define the function and forget to call it. Run this:

DEFINED BUT NEVER CALLED · 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 stays empty. The CONSOLE shows no error. The steps exist under the name setTagline, but nothing asked them to run. Add a call: setTagline("...");.

You mistype the name on the call. You define function setTagline(text) { ... } and write setTaglien("Building things for the web");. The tagline stays empty. The CONSOLE shows a red ReferenceError naming setTaglien. The call must match the definition spelling exactly.

You leave a quoted string inside the function instead of using the parameter. The body still says tagline.textContent = "Building things for the web"; while the parameter is text. You change the call to setTagline("Learning in public"); and Run. The tagline still shows the old hardcoded line. The value from the call never reaches textContent. Inside the braces, write textContent = text.

Try it yourself

Wrap your tagline lines in setTagline so one call sets the text. Confirm each step in the preview.

Run the starting code below. Confirm the tagline under the name already shows and is teal. That is the previous lesson's three lines still written out in full.
Replace those three tagline lines with a function setTagline(text) { ... } block. Keep the same three steps inside. Use text instead of the quoted string for textContent. Do not call it yet. Run it. Confirm the tagline is empty again, with no red error. Defining the function alone does not run it.
Below the function, add setTagline("Building things for the web"); (or your own short line). Run it. Confirm the tagline text and teal styling return.
Change only the call to setTagline("Learning in public"); (any new short line). Run it. Confirm the tagline updates to that new string without rewriting the function body.
Break it on purpose: delete the call line, leave the function definition in place, and Run. Confirm the tagline goes empty again and the CONSOLE shows no error. Put the call back and confirm the text returns.

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 tagline logic now lives in setTagline. The next lesson hooks a button click to a function like this, so a visitor can change the page.