Create an Interactive Button with JavaScript

An interactive button is a small project that shows how HTML and JavaScript work together. HTML creates the button and message area; JavaScript listens for a click and changes the page.

Review the JavaScript explanation on Playcode123.com, then use the Sandbox to experiment with this example.

Build the button

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Button</title>
  <style>
    button {
      padding: 10px 16px;
      background: #0757a8;
      color: white;
      border: 0;
      border-radius: 6px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Practice reminder</h1>
  <button id="reminderButton">Show reminder</button>
  <p id="message"></p>

  <script>
    const button = document.getElementById("reminderButton");
    const message = document.getElementById("message");

    button.addEventListener("click", function () {
      message.textContent = "Practice for 15 minutes today!";
      button.textContent = "Reminder shown";
    });
  </script>
</body>
</html>

Expected result

At first, the message area is empty. After you click the button, a reminder appears and the button label changes to “Reminder shown.”

Read the result, one action at a time

  • Before a click: “Show reminder” is the button label. The empty paragraph already exists in the HTML; it simply has no text to display.
  • After the first click: the paragraph shows “Practice for 15 minutes today!” and the button says “Reminder shown”. These are two separate updates to two elements.
  • After another click: the original example writes the same text again. It does not hide the reminder yet. You will add that behaviour in the exercise.
  • After reloading: the original HTML returns. This example does not save a reminder or schedule a notification.

Try changing only the reminder sentence, then run the page again. The button still works because JavaScript finds it by its id, not by the words printed on it.

How it works

  1. getElementById() finds the button and paragraph.
  2. addEventListener("click", ...) waits for a click.
  3. The function runs only after that click.
  4. textContent safely changes the visible text.

Why use addEventListener?

You may see onclick inside HTML examples. It works, but addEventListener() keeps the behavior in JavaScript and makes larger projects easier to organize.

Debug a button that does nothing

Make one deliberate mistake in your practice copy: change the HTML ID to reminderBtn while leaving the JavaScript lookup as "reminderButton". Run the page and try the button. You will still see a button, because the HTML is valid, but the listener cannot be attached to the missing element.

Open the developer tools for the page running your example and look at Console. You may see a TypeError mentioning null and addEventListener; exact wording varies by browser. In an embedded sandbox, choose the preview frame as the console context, or save the example as an HTML file and open it in its own tab.

console.log(button); // null when the ID does not match

Compare the HTML ID and the quoted name in getElementById(), character by character. Restore id="reminderButton", run again, and confirm that both the sentence and label change. Remove the temporary log after checking. If the IDs already match, check that the script remains below the button in the document.

Common mistakes

  • The ID in JavaScript does not exactly match the HTML ID.
  • The script runs before the button exists. Put the script near the end of <body> for this example.
  • "click" is misspelled or missing quotes.
  • The function is called immediately instead of being passed to the listener.
  • Smart quotation marks copied from formatted text replace normal code quotes.

Exercise: toggle the message

Add a variable named isVisible. On the first click, show the reminder. On the next click, clear it. Continue alternating each time the button is clicked. As an extra challenge, also change the button’s background color.

Check your work: click several times and watch the browser console for errors. Confirm that every ID and variable name uses the same capitalization.

Worked solution: show and hide the reminder

Try the exercise before reading this solution. Keep the complete HTML example above, but replace the entire contents of its <script> element with the following JavaScript. Do not keep the original click listener as well, because both listeners would respond to each click.

const button = document.getElementById("reminderButton");
const message = document.getElementById("message");
let isVisible = false;

button.addEventListener("click", function () {
  isVisible = !isVisible;

  if (isVisible) {
    message.textContent = "Practice for 15 minutes today!";
    button.textContent = "Hide reminder";
  } else {
    message.textContent = "";
    button.textContent = "Show reminder";
  }
});

false and true are Boolean values. The variable starts outside the listener so it remembers the previous state between clicks. !isVisible reverses the current value: the first click changes false to true; the second changes true to false. Declaring it inside the listener would restart it on every click.

For an accessible version, use <button type="button" id="reminderButton">Show reminder</button> and <p id="message" aria-live="polite"></p> in the HTML. The native button supports keyboard activation, while the live region can announce the new message. Keep a visible focus outline.

Check the solution

  1. Reload: the label should be “Show reminder” and the paragraph empty.
  2. Activate once: the sentence appears and the label becomes “Hide reminder”.
  3. Activate again: the sentence disappears and the label returns to “Show reminder”.
  4. Repeat several times. Then reach the button with Tab and activate it with Enter or Space.

Optional colour challenge: add .reminder-active { background-color: #176b3a; } inside the existing style element. After isVisible = !isVisible;, add button.classList.toggle("reminder-active", isVisible);. The class is present only while the reminder is shown; the changing label still communicates the action without relying on colour.

Next, use the variables tutorial to understand stored state, or build the keyboard-friendly practice counter.