Web pages with JavaScript: DOM and clicks

What you'll learn

Find an element on the page with document.querySelector
Change the text and look of an element with JavaScript
React to clicks with addEventListener

The page as a tree

The browser turns your HTML into a tree of elements: the heading, the paragraphs, the buttons. This tree is called the DOM (Document Object Model). With JavaScript you can read it and change it – while the page is already being shown.

JavaScript goes in a <script> part. Best put it at the bottom, after the HTML – then the elements already exist when the script looks for them.

Finding and changing elements

document.querySelector("#title") finds the element with id="title". The # stands for an id, just like the dot in CSS stands for a class:

<h1 id="title">Good morning!</h1>
<p id="info">Nothing special here yet.</p>

<script>
  const title = document.querySelector("#title");
  title.textContent = "Good evening!";
  title.style.color = "midnightblue";

  const info = document.querySelector("#info");
  info.textContent = "This text comes from JavaScript.";
  console.log("Done changing!");
</script>

Whatever you print with console.log appears below in the console.

Command	What it does
`element.textContent = "Hello"`	change the text
`element.style.color = "red"`	change a CSS property
`element.classList.add("important")`	add a class
`element.classList.toggle("on")`	switch a class on or off

Reacting to clicks

With addEventListener("click", …) you say: “When someone clicks here, do this.” The function behind it runs again on every click:

<button id="button">Click me!</button>
<p id="answer"></p>

<script>
  let clicks = 0;
  const answer = document.querySelector("#answer");

  document.querySelector("#button").addEventListener("click", () => {
    clicks = clicks + 1;
    answer.textContent = `You clicked ${clicks} times.`;
    console.log("Click number", clicks);
  });
</script>

Click the button in the preview a few times and look at the console.

Lights on, lights off

classList.toggle switches a class every time it’s called. That’s how you build a light switch:

<style>
  body { font-family: sans-serif; transition: background 0.3s; }
  .dark { background: #111; color: #eee; }
</style>

<h2>Light switch</h2>
<button id="switch">💡 Switch</button>

<script>
  document.querySelector("#switch").addEventListener("click", () => {
    document.body.classList.toggle("dark");
  });
</script>

Remember: HTML decides what is there. CSS decides how it looks. JavaScript decides what happens. In the task you need all three.

Your task

Your turn

Build a click counter. The page already has the number <span id="number">0</span> and two buttons. A click on Plus (#plus) increases the number by 1. A click on Zero (#zero) sets it back to 0. From 10 on, the number should be red (style.color = "red"), below that normal again (style.color = "").

<style>
  body { font-family: sans-serif; text-align: center; }
  #number { font-size: 64px; display: block; margin: 20px; }
  button { font-size: 20px; padding: 8px 16px; }
</style>

<span id="number">0</span>
<button id="plus">Plus</button>
<button id="zero">Zero</button>

<script>
  let counter = 0;
  const display = document.querySelector("#number");

  // The clicks go here
</script>

Something to think about
document.querySelector("#plus").addEventListener("click", () => { … }) – inside, increase counter and set display.textContent = counter.
Which command helps?
When Zero is clicked, set the variable counter AND the display to 0.
After every click: if (counter >= 10) { display.style.color = "red"; } else { display.style.color = ""; }

Solve it without hints to earn a ⭐ on your progress page.

Show solution

Try it yourself first – mistakes teach you the most. Here is one possible solution:

<style>
  body { font-family: sans-serif; text-align: center; }
  #number { font-size: 64px; display: block; margin: 20px; }
  button { font-size: 20px; padding: 8px 16px; }
</style>

<span id="number">0</span>
<button id="plus">Plus</button>
<button id="zero">Zero</button>

<script>
  let counter = 0;
  const display = document.querySelector("#number");

  function show() {
    display.textContent = counter;
    display.style.color = counter >= 10 ? "red" : "";
  }

  document.querySelector("#plus").addEventListener("click", () => {
    counter = counter + 1;
    show();
  });

  document.querySelector("#zero").addEventListener("click", () => {
    counter = 0;
    show();
  });
</script>