Find and change
Find an element on a page with JavaScript, change its text and colour, and read what the console says.
Every button that opens a menu, every counter that goes up and every live search is JavaScript changing a page that is already on screen.
A web page is a tree of elements. JavaScript can find one and change it while the page is open. Two steps do most of the work:
- Find it:
document.querySelector("#title")finds the element withid="title". A#means an id, a.means a class (".note"), and a plain word means a tag ("h1"). - Change it:
title.textContent = "New words"replaces its text, andtitle.style.color = "crimson"changes its colour.
console.log(...) writes a message in the Console under the page, to see what your code is doing.
The hard part is the selector. It is just text, so a typo finds nothing: the answer is null, and the next line fails with "Cannot set properties of null". When you see null, check the selector first.
- Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
- Run: Run it and compare the result with your prediction.
- Investigate: Trace how each line of code connects to what you see.
- Modify: Change the code on purpose and check the result.
- Make: Build something new using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
Predict
<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";
console.log(title.textContent);
</script>
Does the script run before or after the heading has appeared?
Run
Press Run. The page starts as plain HTML, and then the script changes two elements. The Console shows what console.log wrote.
<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 and water.";
note.style.fontStyle = "italic";
console.log(title.textContent);
</script>
Investigate
<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 and water.";
note.style.fontStyle = "italic";
console.log(title.textContent);
</script>
Match code with meaning.
The browser reads from the top.
The error shows on one line and starts on another.
Match each line with what it does.
This stops with an error: Cannot set properties of null. Click the line that is the real cause.
Modify
Change the note to say you should bring sunscreen too.
Need a hint?
The note has class note, so its selector starts with a dot.
Another hint
const note = document.querySelector(".note"); then note.textContent = "…";
Show the expected result
Make the heading crimson.
Need a hint?
Style properties are on the element's style: title.style.color.
Another hint
The value is text, in quotes: title.style.color = "crimson";
Show the expected result
Change the note's words to bring sunscreen too.
This ticks when your page has all of the above.
Make the heading crimson.
This ticks when your page has all of the above.
Change three things
Find three elements and change something about each: text, colour (style.color), size (style.fontSize = "24px"). Add more elements of your own to the page if you like.
Where this leads
Your code can now find and change anything on a page. Next: make it happen when someone clicks.
For teachers
Students find an element with querySelector, change its text and colour from JavaScript, read console.log in the Console, meet null from a mistyped selector, and change three elements on a page of their own. About 50 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
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.
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
- Predict: ask what the page looks like before the script runs, and after.
- Run: point out the Console under the page and where the message came from.
- Investigate: for the bug, ask 'what does querySelector give you when it finds nothing?'
- Modify: ask students to say the selector aloud: 'hash for id, dot for class'.
- 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
- Cannot set properties of null. Ask: Does the selector match the id or class exactly, with Fix: Copy the id or class from the HTML, and add
- Nothing changes, and there is no error. Ask: Did you press Run, and is the change on a line after the selector? Fix: Press Run again, and check the line that changes the element is inside the script.
- The colour or size does not change. Ask: Is the value in quotes and spelled as CSS spells it? Fix: Write el.style.color = "red"; and el.style.fontSize = "24px"; (capital S in fontSize).
- The page shows the script as text. Ask: Is the code inside <script> and </script>? Fix: Wrap the JavaScript in script tags.
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.
Where it leads
Next lesson: events, so the change happens when someone clicks.
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.
- Find an element on a page with JavaScript.
- Change its text and its colour.
- Read the Console to see what my code did.