DOM and events: connect JavaScript to HTML

Selecting an element

document.querySelector accepts a CSS selector and returns the first matching element, or null. # selects an id; a dot selects a class. Check the result before using it.

Listening for events

addEventListener registers a function to run on events such as click or input. Pass the function without immediately calling it. The event object provides information; event.target identifies the object the event was dispatched to.

Complete counter example

Place this inside an HTML document. The script comes after the elements, so they exist when selected. Each click increments the counter and replaces the paragraph’s text.

<button id="add" type="button">Add visit</button>
<p id="result" aria-live="polite">Visits: 0</p>
<script>
  const button = document.querySelector("#add");
  const result = document.querySelector("#result");
  let visits = 0;
  if (button && result) {
    button.addEventListener("click", () => {
      visits += 1;
      result.textContent = "Visits: " + visits;
    });
  }
</script>

Text and HTML behave differently

textContent inserts text without parsing tags. innerHTML parses HTML, so do not directly insert untrusted content through it. For a plain name or message, textContent avoids that interpretation.

Common mistakes and practice

1. If selection returns null, check the selector and script timing.
2. Verify each click adds one visit; registering behaviour repeatedly can duplicate it.
3. Add a reset button and try keyboard interaction.