An optional lesson. Students use a short JavaScript recipe (find an element by id, wait for a click, change the page) to make a button change words and colours, and a form greet people by name.
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.
Predict and Run 10 min · Investigate 15 min · Modify 10 min · Make 10 min · Sign-up 5 min
This lesson is optional and treats JavaScript as a recipe: students copy the pattern, change the parts and see the effect, without needing to understand every symbol. That is deliberate (the same way from turtle import * is a recipe in the Python course). The DOM course explains it properly: what document is, why function () { ... } is passed to addEventListener, and how to write it from scratch.
The recipe has three parts: find an element (document.querySelector('#go'), where # means id, as . means class in CSS), wait for a click (.addEventListener('click', ...)), change something (.textContent = '...' for words, .style.color = '...' for colour). Do the Make task yourself first.
#Go versus id="go". Like CSS, a mismatched selector fails silently. (The browser's developer console shows an error, if you want to show it.).value reads a box and + joins words. Students who finish can greet differently by time of day, or count clicks.The recipe has unfamiliar punctuation, so small slips break it silently. Ask them to compare the id in querySelector with the button's id, quotes and brackets included.
| What you will see | A question to ask | The fix |
|---|---|---|
| Clicking the button does nothing. | Does the id in querySelector (after the | Make them identical, capitals included, and check the quotes and brackets are all closed. |
| The message shows Hi, ! with no name. | Did you read the box with .value inside the click function, after something was typed? | Put the const name = ... line inside the function, so it reads the box when the button is clicked. |
| The script code shows on the page as text. | Is the JavaScript between <script> and </script>? | Wrap the recipe in a script block after the HTML. |
One possible solution for each task. Other correct programs are fine.
<p id="message">Ready?</p>
<button id="go">Start</button>
<script>
document.querySelector('#go').addEventListener('click', function () {
document.querySelector('#message').textContent = 'Off we go!';
});
</script>
<p id="message">Ready?</p>
<button id="go">Start</button>
<script>
document.querySelector('#go').addEventListener('click', function () {
document.querySelector('#message').textContent = 'Off we go!';
document.querySelector('#message').style.color = 'green';
});
</script>
<p id="message">Ready?</p>
<button id="go">Start</button>
<button id="reset">Reset</button>
<script>
document.querySelector('#go').addEventListener('click', function () {
document.querySelector('#message').textContent = 'Off we go!';
document.querySelector('#message').style.color = 'green';
});
document.querySelector('#reset').addEventListener('click', function () {
document.querySelector('#message').textContent = 'Ready?';
document.querySelector('#message').style.color = 'black';
});
</script>
<label for="name">Name</label>
<input id="name" type="text">
<button id="hello">Say hello</button>
<p id="message"></p>
<script>
document.querySelector('#hello').addEventListener('click', function () {
const name = document.querySelector('#name').value;
document.querySelector('#message').textContent = 'Hi, ' + name + '!';
});
</script>
<style>
.signup {
width: 260px;
padding: 16px;
border: 2px solid teal;
}
label {
display: block;
margin-top: 8px;
}
</style>
<div class="signup">
<h2>Join the chess club</h2>
<label for="name">Name</label>
<input id="name" type="text">
<button id="join">Join</button>
<p id="thanks"></p>
</div>
<script>
document.querySelector('#join').addEventListener('click', function () {
const name = document.querySelector('#name').value;
document.querySelector('#thanks').textContent = 'Thanks, ' + name + '! See you on Wednesday.';
});
</script>
Stretch: Count clicks: let count = 0; outside the function, then count = count + 1; and show the count inside it. Or change the page's background: document.body.style.backgroundColor = 'gold';
Support: Do the first Modify task together, then let students copy and change the recipe for the reset button with the hint open.
Name the three parts of the recipe, and what each one does.
Find an element (document.querySelector('#id')), wait for a click (addEventListener('click', ...)), and change something (textContent or style).
The DOM course teaches JavaScript properly: variables, decisions, functions and events, with the same querySelector and addEventListener. Students from the Python course will recognise events (onscreenclick there, addEventListener here). Forms that send data somewhere need a server; Gradio (in the Python pathway) is one way to put a program behind a form.