If and Else: Choose a Path with a Comparison

The previous lesson wired a click to change the tagline. This lesson adds a second button and uses if / else with a comparison so one control can flip the page between light and dark.

The concept

Here is your page with the change-tagline button already wired. 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>
      <button type="button" class="change-tagline btn">Change tagline</button>
      <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");
      }
      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>

RUN TO SEE YOUR PAGE

The tagline button works. There is no theme button yet. You will add one in this lesson, write dark-theme CSS, and branch with if/else.

Run this tiny page. Click Toggle theme more than once:

ONE CLICK, TWO LOOKS · 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 page flips dark, then light, then dark again. One function chooses a path each time.

A comparison asks a yes-or-no question. The operator === checks whether two values are the same. It does not store a new value.

if (condition) { ... } runs its block when the condition is true. else { ... } runs when it is not.

Watch the CONSOLE on this tiny script:

A COMPARISON PICKS A PATH · 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

theme holds "dark". The comparison theme === "dark" is true, so the CONSOLE shows dark path.

The syntax

Theme needs a value that changes when you click. Earlier scripts used const, which keeps one value. Use let when you will assign a new value later:

let theme = "light";
 
function toggleTheme() {
  if (theme === "dark") {
    document.body.classList.remove("theme-dark");
    theme = "light";
  } else {
    document.body.classList.add("theme-dark");
    theme = "dark";
  }
}

=== compares. A single = assigns.

classList.remove takes a class off an element, the partner of classList.add you already used.

Keep a string in theme so each click knows which path to take next.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Theme</title>
    <style>
      body {
        background-color: ghostwhite;
        color: #222222;
      }
      body.theme-dark {
        background-color: #1a1a2e;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h1>Your Name</h1>
    <button type="button" class="theme-toggle btn">Toggle theme</button>
    <script>
      let theme = "light";
      function toggleTheme() {
        if (theme === "dark") {
          document.body.classList.remove("theme-dark");
          theme = "light";
        } else {
          document.body.classList.add("theme-dark");
          theme = "dark";
        }
      }
      const themeButton = document.querySelector(".theme-toggle");
      themeButton.addEventListener("click", toggleTheme);
    </script>
  </body>
</html>

One theme button. One theme variable. If/else picks add or remove for theme-dark.

Common mistakes

You write one = inside the if condition. Run this:

ONE EQUALS ASSIGNS · 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 entered the if and then dark. The line if (theme = "dark") assigned "dark" into theme. Assignment is not a comparison. Use === when you mean "is this equal to that?"

You add the class in JavaScript but never write the CSS. The CONSOLE stays quiet. Clicks seem to "work." The page still looks light. classList.add("theme-dark") only attaches a name. Your stylesheet needs body.theme-dark { ... } rules before the look changes.

You select the change-tagline button again for the theme control. Both buttons exist. querySelector(".change-tagline") is the wrong target for theme. Give the new button its own class, such as theme-toggle, and select that.

Try it yourself

Add a theme toggle to your profile page. Confirm each step in the preview.

Run the starting code below. Confirm the change-tagline button still updates the tagline. Confirm there is no theme-toggle button yet.
In styles.css, add dark rules, for example body.theme-dark { background-color: #1a1a2e; color: #eeeeee; } and adjust h1 / .block under body.theme-dark if you want. Do not put the theme button in the HTML yet. Run it. Confirm the page still looks light.
Under the change-tagline button in the header, add <button type="button" class="theme-toggle btn">Toggle theme</button>. Run it. Confirm the new button appears and matches the teal button look.
In the script, add let theme = "light"; and a toggleTheme function that uses if (theme === "dark") / else to remove or add "theme-dark" on document.body, updating theme each time. Select .theme-toggle and listen for "click" with toggleTheme (no parentheses on the name). Run it. Confirm repeated clicks flip dark and light.
Break it on purpose: change the comparison to a single = so the condition assigns. Run it and click. Confirm the theme no longer flips both ways the way you expect. Put === back and confirm both directions 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 can choose a path. The next lesson stores your skills as a list of values in JavaScript, ready to drive the page later.