JavaScript lesson 24: The web page: click events and a project

What your child will learn

Learning goal: run code when an element is clicked.

Success looks like

• I can run code when an element is clicked.
• I can use the event object.
• I can plan, build and test a small interactive page.

Key words

event · listener · handler · click · event object · test

What to have ready

• A device with a web browser (the code runs in the browser – nothing to install)
• Paper for tracing
• A keyboard helps for typing code (a tablet or phone works too)

The big ideas (for the adult)

button.addEventListener("click", f) SAVES the function f. It runs every time the button is clicked – not when it is added. button.click() clicks it from code, which is handy for testing.

Pass the function itself, with no brackets. Two listeners on one button both run, in order. The handler can take an event: (e) => …, where e.target is the element clicked.

Project: plan a small page – a click counter, a to-do list or a quiz button. Write the steps, build one step at a time, and test every button.

Worked example – see it

// <h1 id="title">Our trip</h1>
// <p id="msg" class="note">Hello Ruby</p>
// <ul id="list"><li>frog</li><li class="star">tiger</li><li>koala</li></ul>
// <button id="go">Click me</button>

const b = document.querySelector("#go")
b.addEventListener("click", () => {
  console.log("Clicked!")
})
console.log("Ready")

It prints:

Ready

The lesson, step by step

Checklist for the project (teacher or parent)

The questions in this lesson are graded by Classfern. The web page your child makes at the end is judged by you, with this checklist – it is not graded by computer. For each line, choose the description that fits best.

• Planning: the steps (what each button does) were written down before coding
  No plan → Some steps written → A clear plan that was followed
• It works: clicking does what the plan says, every time
  Does not run → Runs, with some bugs → Works for normal use → Works, even when clicked many times or in an unusual order
• Testing: every button and message was tried, including the edge cases
  Not tested → Tested once → Every part tested, including an edge case
• Readable: clear names, helpful comments, and a page that is easy to use
  Hard to follow → Mostly clear → Clear names, comments and a tidy page throughout