JavaScript Click and Form Events

So far your scripts run once, when the page loads. Real pages wait. They do something when the visitor clicks, types or submits. Those moments are events, and you tell the browser what to do with addEventListener.

A button that does something

Using the order page from the last lesson:

const payButton = document.querySelector("#pay");
const status = document.querySelector(".status");

payButton.addEventListener("click", () => {
  status.textContent = "Paid";
  payButton.disabled = true;
});

Three parts: the element, the event name ("click"), and a function to run when it happens. That function is called a listener or handler. Nothing inside it runs until the click.

The event object

The browser passes your listener an object with details about what happened. Usually it's named event or e.

document.querySelector("#items").addEventListener("click", (event) => {
  console.log("You clicked:", event.target.textContent);
});

event.target is the exact element that was clicked. Here one listener on the list handles clicks on every <li> inside it, including items you add later. That's handy for lists that change.

Reacting to typing

input fires on every change to a text field. Good for live feedback:

<label>Quantity <input id="qty" type="number" value="1" min="1"></label>
<p>Total: <span id="total">95</span></p>

const qty = document.querySelector("#qty");
const total = document.querySelector("#total");
const price = 95;

qty.addEventListener("input", () => {
  const n = Number(qty.value);
  total.textContent = Number.isNaN(n) ? "-" : n * price;
});

Remember from the data types lesson: qty.value is always a string, even on a number field. Convert it.

Forms: stop the reload

When a form is submitted, the browser's default is to send it and load a new page. If you want to handle it with JavaScript, stop that default first.

<form id="signup">
  <input id="email" type="text" placeholder="you@example.com">
  <button type="submit">Sign up</button>
  <p id="message"></p>
</form>

const form = document.querySelector("#signup");
const email = document.querySelector("#email");
const message = document.querySelector("#message");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (!email.value.includes("@")) {
    message.textContent = "Please enter a valid email.";
    return;
  }
  message.textContent = "Thanks! Check your inbox.";
});

The field is type="text" here so you can see your own check run. In a real form, use type="email": the browser then blocks text without an @ and shows its own message before your listener even runs.

Listen to submit on the form, not click on the button. Then pressing Enter in the field works too, and so does a screen reader.

Events you'll use most

• click: buttons, links, anything clickable.
• input: every change in a text field.
• change: when a select, checkbox or field is committed.
• submit: a form is sent.
• keydown: a key is pressed (check event.key).
• DOMContentLoaded: the HTML is ready. Useful if your script has to be in the <head>.

Common mistakes

• Calling the function instead of passing it.
• Listening for click on the submit button instead of submit on the form.
• Forgetting preventDefault(), so the page reloads.
• Attaching the same listener inside another listener, so every click adds one more and things start happening twice, then three times.

What happens if you skip this

You'll have a page that computes the right answer once, at load, and ignores the visitor after that. Or a form that reloads and wipes what they typed. Either way, they leave.

Try this: add a "Clear" button to the signup form that empties the field and the message. Which event, and on which element?