Find and change

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 find an element on a page with JavaScript.
• I can change its text and its colour.
• I can read the Console to see what my code did.

Timing

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

Before class

Read the unit primer first. Students know HTML and CSS (and, from p5.js, variables and functions); this is the first time JavaScript meets a page. document.querySelector takes a CSS-style selector as text: #id, .class, or a tag. textContent is the words, style.color and style.fontSize the look. The script sits below the elements it finds: it runs when the browser reaches it. The bug task is the most common slip of the whole course: a selector that matches nothing returns null, and the error appears on the next line. The playground says so in its hint. Our playground runs the whole page again each time you press Run, so changes made by the script always start from the HTML.

Running the lesson

1. Predict: ask what the page looks like before the script runs, and after.
2. Run: point out the Console under the page and where the message came from.
3. Investigate: for the bug, ask 'what does querySelector give you when it finds nothing?'
4. Modify: ask students to say the selector aloud: 'hash for id, dot for class'.
5. Make: ask each student which element they found first and how they knew its selector.

The hard part (on purpose)

The selector is text and a typo gives null, with the error one line later. Teach 'null means check the selector' before anything else.

When students get stuck

Answers to the checks

1. Predict: What does the heading say once the page has loaded?
   Sports day: moved to Friday. The script finds the heading and replaces its text, and console.log then writes the new text in the Console.
2. Which line does what?: Match each line with what it does.
   document.querySelector("#title") → C. finds the element with id title; document.querySelector(".note") → A. finds the first element with class note; title.textContent = "Moved"; → D. replaces the words inside the element; console.log(title.textContent); → B. writes the text in the Console, not on the page
3. Script order: Why is the script below the heading and not above it?
   A script runs as soon as the browser reaches it, so the heading must already exist
   The browser reads the page from the top. A script above the heading would run before the heading exists, so querySelector would find null.
4. Spot the bug: This stops with an error: Cannot set properties of null. Click the line that is the real cause.
   line 4
   The error shows on line 5, but the cause is line 4: the heading's id is title, so #titel finds nothing and title is null.
5. Where this leads: You want the heading to change only when someone clicks a button. What is missing?
   Code that waits for the click and then runs the change
   A script runs once, as the page loads. To wait for a click you give the button a function to run when the click happens: an event listener. Next lesson.

Solutions

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

Modify › The note

<h1 id="title">Sports day</h1>
<p class="note">Bring a hat.</p>
<script>
  const title = document.querySelector("#title");
  title.textContent = "Sports day: moved to Friday";
  const note = document.querySelector(".note");
  note.textContent = "Bring a hat, water and sunscreen.";
</script>

Modify › Crimson

<h1 id="title">Sports day</h1>
<p class="note">Bring a hat.</p>
<script>
  const title = document.querySelector("#title");
  title.textContent = "Sports day: moved to Friday";
  title.style.color = "crimson";
</script>

change three things

<h1 id="title">My page</h1>
<p class="note">Change me with JavaScript.</p>
<p id="extra">Me too.</p>
<script>
  const title = document.querySelector("#title");
  title.textContent = "Welcome to my page";
  title.style.color = "teal";
  const note = document.querySelector(".note");
  note.textContent = "Written by JavaScript.";
  note.style.fontSize = "24px";
  const extra = document.querySelector("#extra");
  extra.textContent = "Me too, in a different colour.";
  extra.style.color = "darkorange";
</script>

Stretch and support

Stretch: Change the page title in the browser tab with document.title, or change an element's background with style.backgroundColor.

Support: Give the first two lines (find, then change) and ask students to copy the pattern for each other element.

Exit ticket

What does querySelector give you if nothing matches?

null, which has no textContent: that is why the next line fails.

What each step is for

• Investigate: querySelector turns a selector into an element, and changing the element's properties changes the page; a selector that matches nothing gives null.
• Modify: Every element has its own text and style; find it with its own selector.
• change three things: Goals only: find three elements and change something about each.

Where it leads

Next lesson: events, so the change happens when someone clicks.