Click events

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can run a function when someone clicks a button.
• I can say what the event name and the handler are.
• I can give a handler without running it straight away.

Timing

Predict and Run 10 min · Investigate 15 min · Modify 10 min · Make 15 min

Before class

Read the unit primer first. This is the Python events lesson (a handler runs when something happens) in JavaScript, and the same lesson as p5's mousePressed, but the page picks the element and the event. addEventListener("click", start) hands the browser a function; start() calls it now. The bug has no red error, so students must look at the page: it says Go! straight away. Functions were taught in the p5.js course; if students skipped it, spend a minute on "a function is code with a name" first. IDs named like variables (message) are fine here because the script uses const.

Running the lesson

1. Predict: ask what is different between writing a recipe and cooking it.
2. Run: ask students to click each button and say which function ran.
3. Investigate: for the bug, ask "when did the heading change, and why then?"
4. Modify: ask where the third button is in the HTML, and where in the script.
5. Make: ask each pair which button does what, before they test.

The hard part (on purpose)

Brackets: start hands the function over, start() runs it now. The page, not an error, shows the slip.

When students get stuck

Answers to the checks

1. Predict: What does the heading say when the page first loads, before anyone clicks?
   Ready? The function start is only run when the button is clicked. Loading the page just tells the button what to do later.
2. Which part does what?: Match each piece with what it does.
   function start() { … } → D. a recipe for the change: nothing happens until it is run; goButton.addEventListener("click", start); → B. when the button is clicked, run start; "click" → A. the event: what the browser waits for; message.textContent = "Go!"; → C. the change itself, inside the handler
3. What makes it run?: Which line makes start run on every click?
   goButton.addEventListener("click", start);
   The listener line tells the browser to run start on each click. The function on its own is just a recipe.
4. Spot the bug: This page says Go! as soon as it loads, and clicking does nothing. There is no red error. Click the line that is wrong.
   line 9
   start() has brackets, so it runs at once, when the page loads. Hand the function over without brackets: addEventListener("click", start).
5. Where this leads: A page needs to count clicks. What does the handler need to keep between clicks?
   A variable made outside the function
   A variable made inside the function starts over each click. A variable made above it keeps its value. Lesson 6.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › A reset button

<h1 id="message">Ready?</h1>
<button id="go">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
<script>
  const message = document.querySelector("#message");
  const goButton = document.querySelector("#go");
  const pauseButton = document.querySelector("#pause");
  const resetButton = document.querySelector("#reset");
  function start() {
    message.textContent = "Go!";
  }
  function pause() {
    message.textContent = "Paused";
  }
  function reset() {
    message.textContent = "Ready?";
  }
  goButton.addEventListener("click", start);
  pauseButton.addEventListener("click", pause);
  resetButton.addEventListener("click", reset);
</script>

Modify › Colours

<h1 id="message">Ready?</h1>
<button id="go">Start</button>
<button id="pause">Pause</button>
<script>
  const message = document.querySelector("#message");
  const goButton = document.querySelector("#go");
  const pauseButton = document.querySelector("#pause");
  function start() {
    message.textContent = "Go!";
    message.style.color = "green";
  }
  function pause() {
    message.textContent = "Paused";
    message.style.color = "orange";
  }
  goButton.addEventListener("click", start);
  pauseButton.addEventListener("click", pause);
</script>

buttons of your own

<h1 id="message">My buttons</h1>
<button id="one">Bigger</button>
<button id="two">Smaller</button>
<button id="three">Colour</button>
<script>
  const message = document.querySelector("#message");
  let size = 32;
  function bigger() {
    size = size + 8;
    message.style.fontSize = size + "px";
  }
  function smaller() {
    size = size - 8;
    message.style.fontSize = size + "px";
  }
  function colour() {
    message.style.color = "rebeccapurple";
  }
  document.querySelector("#one").addEventListener("click", bigger);
  document.querySelector("#two").addEventListener("click", smaller);
  document.querySelector("#three").addEventListener("click", colour);
</script>

Stretch and support

Stretch: Make one button toggle between two states using a variable, or make a button remove itself with button.remove().

Support: Give the whole Reset function and listener, and ask students to change what it says.

Exit ticket

What is the difference between start and start() in a listener?

start hands the function over to run on each click; start() runs it once, right now.

What each step is for

• Investigate: addEventListener hands a function to the browser to run later, on each event; writing the function name with brackets runs it now instead.
• Modify: Each button needs its own function and its own listener; a handler can change more than one thing.
• buttons of your own: Goals only: at least two buttons that change different things, each with its own function.

Where it leads

Next lesson: classes, to change how the whole page looks with one line.