javascript · level 2 · unit 4 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
After a good answer, the form and the first field.
Once an answer is used, the form should be ready for the next one. form.reset() puts every field back the way the page started: empty boxes, unticked checkboxes, first dropdown choices.
The field with focus is the one your typing goes into. Call snack.focus() and the cursor jumps into that field, so the next answer can be typed straight away, with no clicking.
To empty one field only, set its .value to an empty string, "".
<form id="add">
<input id="snack" placeholder="Add a snack">
<button>Add</button>
</form>
<ul id="snacks"></ul>const form = document.querySelector("#add");
const snack = document.querySelector("#snack");
form.addEventListener("submit", (event) => {
event.preventDefault();
const item = document.createElement("li");
item.textContent = snack.value;
document.querySelector("#snacks").append(item);
form.reset();
snack.focus();
});Press run it to bring the page to life.
console
nothing logged yet
Read every answer first. After reset(), the old answers are gone.
guess first
Two diary entries are saved. What does the page show?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<form id="diary">
<input id="entry" placeholder="Today I...">
<button>Save</button>
</form>
<ol id="entries"></ol>const form = document.querySelector("#diary");
const entry = document.querySelector("#entry");
form.addEventListener("submit", (event) => {
event.preventDefault();
const line = document.createElement("li");
line.textContent = entry.value;
document.querySelector("#entries").append(line);
form.reset();
});your turn
Your turn. Make a guest book that clears itself.
Fill in the method that empties the form, then the one that puts the cursor back in the name box. Press run, sign the book and watch the box clear.
the page your code works on
<form id="book">
<input id="visitor" placeholder="Your name">
<button>Sign</button>
</form>
<ul id="names"></ul>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- the book says Grandad was herenot checked yet
- the name box is empty againnot checked yet
- the cursor is back in the boxnot checked yet
fix it
The squad gets an empty name. Fix it!
the page your code works on
<form id="team">
<input id="player" placeholder="Player name">
<button>Add to the team</button>
</form>
<ul id="squad"></ul>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- the squad shows Kofinot checked yet
- the box is empty afterwardsnot checked yet
- An empty
<li>appears. What is in the box at the moment line 7 reads it? form.reset()empties the box before the name is read. The order matters.- Move form.reset(); from line 5 to the end of the listener, then press run.
nailed it
your forms tidy up after themselves. :D
form.reset()puts every field back to how it started.field.focus()puts the cursor in that field.- Read the answers first, then reset.
new words in your collection
- reset
- focus
This lesson isn’t saved. A free account remembers every lesson you finish.