Make it react
Add a few lines of JavaScript, as a recipe, so a button changes the page and a form greets people by name.
Every like button, quiz and game on a website is a page that reacts: code waits for a click, then changes something.
So far your pages show things. With a few lines of JavaScript, a page can react. This lesson uses JavaScript as a recipe: copy the pattern, change the parts, and see what happens. The DOM course explains how every part works.
- 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
<p id="message">Ready?</p>
<button id="go">Start</button>
<script>
document.querySelector('#go').addEventListener('click', function () {
document.querySelector('#message').textContent = 'Go!';
});
</script>
Read the code. The <script> block is JavaScript. What happens when someone clicks Start?
Run
Click Start. Then change 'Go!' to your own words (keep the quotes) and click again.
<p id="message">Ready?</p>
<button id="go">Start</button>
<script>
document.querySelector('#go').addEventListener('click', function () {
document.querySelector('#message').textContent = 'Go!';
});
</script>
Investigate
<p id="message">Ready?</p>
<button id="go">Start</button>
<script>
document.querySelector('#go').addEventListener('click', function () {
document.querySelector('#message').textContent = 'Go!';
});
</script>
The recipe, piece by piece.
# picks an id, as . picks a class.
Clicking Start should change the message.
.style changes an element's CSS.
<script>
document.querySelector('#go').addEventListener('click', function () {
document.querySelector('#message').textContent = 'Go!';
document.querySelector('#message').style.color = 'green';
});
</script>
Match each part of the recipe with its job.
Clicking Start does nothing, and nothing on the page says why. Click the line that causes it.
Modify
Change the message to your own words.
Need a hint?
Change only the words between the quotes after textContent =.
Show the expected result
Make the message turn a colour when Start is clicked.
Need a hint?
The colour should change when the button is clicked, so the new line goes inside the function, beside the text change.
Another hint
Add a line inside the function, under the textContent line: document.querySelector('#message').style.color = 'green';
Show the expected result
Add a Reset button that puts the message back to Ready? (and its colour back to black).
Need a hint?
Reset needs two things: a second button with its own id, and a second recipe that listens to it.
Another hint
Add <button id="reset">Reset</button> after the Start button.
Another hint
Copy the whole recipe, change #go to #reset, and set the words back to Ready?.
Show the expected result
Make the message turn a colour too.
This ticks when your page has all of the above.
Add a Reset button that puts the message back.
This ticks when your page has all of the above.
Make
Make the page greet people: when someone types their name and clicks Say hello, the message shows Hi, Ada! (with their name). .value reads what was typed, and + joins words together.
Need a hint?
Start from the recipe: find #hello, wait for a click.
Another hint
Inside: const name = document.querySelector('#name').value; reads the box. Then set the message's textContent to 'Hi, ' + name + '!'.
When Say hello is clicked, show Hi, and the name typed in the box.
This ticks when your page has all of the above.
Make the sign-up say thank you
This sign-up box is not connected to anything. Add the recipe so that clicking Join shows Thanks, Ada! See you on Wednesday. (with the name that was typed) in the empty paragraph. In a real club, the next step would be sending the name to the club, which needs a program on a server.
For teachers
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. About 50 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Students will be able to
- I can use the recipe to make a button change the words on a page.
- I can explain the three parts of the recipe (find, wait, change).
- I can use an id selector with
- I can read what someone typed and show it on the page.
Before class
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.
Running the lesson
- Predict: most students say the words change; a few expect nothing because there is no form. Click to see.
- Investigate: name the three parts on the board (find, wait, change). The selectors are the CSS ones they know, plus # for id.
- The button that does nothing: `#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.)
- Modify: each task changes one part of the recipe. The reset button is a second copy of the whole recipe.
- Make: `.value` reads a box and `+` joins words. Students who finish can greet differently by time of day, or count clicks.
- Sign-up: the Forms lesson's form, now reacting. Point out what is still missing: sending the name somewhere needs a server.
The hard part (on purpose)
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.
When students get stuck
- Clicking the button does nothing. Ask: Does the id in querySelector (after the Fix: Make them identical, capitals included, and check the quotes and brackets are all closed.
- The message shows Hi, ! with no name. Ask: Did you read the box with .value inside the click function, after something was typed? Fix: 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. Ask: Is the JavaScript between <script> and </script>? Fix: Wrap the recipe in a script block after the HTML.
Stretch and support
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.
Where it leads
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.
What each step is for
- Predict: Students recognise selectors (#go) from CSS; predicting the change before clicking makes the cause and effect explicit.
- Run: A script finds elements by id, waits for a click, and changes the page.
- Investigate: The recipe has three parts: find an element (by id, with #), wait for a click, change something.
- Modify: Changing the recipe one part at a time: the words, then the colour, then a second button with its own recipe.
- Make the sign-up say thank you: The form from the Forms lesson, now doing something: it reads the name and thanks the person on the page.
- Use the recipe to make a button change the words on a page.
- Explain the three parts of the recipe (find, wait, change).
- Use an id selector with
- Read what someone typed and show it on the page.