✓ CAC REGISTEREDRC - 9900489View certificate
Blessed Records Exclusive Ent.
Promote your music

Technology & Software · Written by the Blessed Records editorial team · Published 21 October 2026

HTML gives a page structure and CSS gives it style, but JavaScript makes it respond. Buttons that open menus, forms that check your input and counters that update instantly all rely on JavaScript. In this tutorial you will build a small click counter and learn three core ideas along the way: variables, events and the page structure known as the DOM.

What you need

You only need a text editor and a browser. If you followed our tutorial on building your first web page, you already have everything. Create a new folder called js-counter and place two files inside it: index.html and app.js.

Step 1: The HTML

Paste this into index.html. It contains a heading, a paragraph with an id, a button with an id and a script tag that loads your JavaScript file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Click Counter</title>
</head>
<body>
  <h1>Click counter</h1>
  <p id="message">You have not clicked yet.</p>
  <button id="btn">Click me</button>
  <script src="app.js"></script>
</body>
</html>

Step 2: The JavaScript

Paste this into app.js and save it.

let count = 0;

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

button.addEventListener("click", function () {
  count = count + 1;
  message.textContent = "You have clicked " + count + " times.";
});

How it works

  • Variable: let count = 0; creates a container named count that holds a number.
  • Finding elements: document.getElementById locates an element on the page by its id. The page structure that JavaScript can read and change is called the DOM.
  • Event listener: addEventListener("click", ...) tells the browser to run the function whenever the button is clicked.
  • Changing the page: message.textContent replaces the text of the paragraph, so the visitor sees the new number immediately.

Step 3: Try it

Open index.html in your browser and click the button. The sentence should change each time. If nothing happens, open the browser’s developer tools and look at the Console tab for red error messages, which usually point to the exact line that needs fixing.

Ideas to extend it

  1. Add a second button that resets the count to zero.
  2. Change the message text when the count reaches ten.
  3. Change the background colour of the page when the button is clicked.
  4. Store the count so it remains after refresh, using the browser’s localStorage.

Common mistakes

  • Forgetting to save app.js before refreshing.
  • Misspelling an id so that JavaScript cannot find the element.
  • Putting the script tag before the elements it needs. Placing it at the end of the body avoids this.
  • Mixing up straight quotation marks with curly quotes copied from a document. Code needs straight quotes.

Where to go next

Once the counter feels easy, learn about functions, arrays and loops, then build small projects such as a to-do list or a tip calculator. Each project teaches new skills, and finishing small projects builds confidence faster than watching long courses.

Key takeaways

  • JavaScript makes pages respond to what visitors do.
  • Variables, events and the DOM are the three starting ideas.
  • Use the browser console to find and fix errors.

Keep reading

This article is for general information and education. It is not legal, financial or professional advice. Read our editorial standards.

    Share