// B6.3 · ~30 min · Beginner
After this lesson your page reacts to clicks, typing and form submits: you add and remove listeners, read what the event object tells you, and handle a form without a reload.
You will be able to
Warm-up · Activity 1 of 7
const list = document.querySelector('#list');
const li = document.createElement('li');
li.textContent = 'b';
list.prepend(li);
console.log(list.textContent, list.children.length);Predict · Activity 2 of 7
const field = document.querySelector('#name');
let n = 0;
field.addEventListener('input', () => {
n += 1;
});
field.value = 'cat';
console.log(n, field.value);Practice · Activity 3 of 7
button.____('click', count);Practice · Activity 4 of 7
Practice · Activity 5 of 7
const buy = document.querySelector('#buy');
buy.addEventListener('click', (event) => {
console.log(event.target.id, event.currentTarget.id);
});
document.querySelector('#icon').click();Brain teaser · Activity 6 of 7
const button = document.querySelector('#like');
let n = 0;
button.addEventListener('click', () => {
n += 1;
});
button.removeEventListener('click', () => {
n += 1;
});
button.click();
console.log(n);Apply · Activity 7 of 7
Check your work against this list
Read the worked example, then write the exercises. Your code runs in your browser or on your computer and is never uploaded.
Worked example
The page has a like button with a counter, a search form and a log paragraph. main.js adds a click listener that counts, a second one with { once: true }, a submit listener that calls preventDefault() and shows the search, and a keydown listener on the field. At the end the script presses its own button twice, submits the form with requestSubmit() and sends an Escape key, the way the exercise tests do, so you can see what each listener receives.
main.js
const like = document.querySelector('#like');
const likes = document.querySelector('#likes');
const form = document.querySelector('#search');
const query = form.elements.query;
const log = document.querySelector('#log');
let count = 0;
like.addEventListener('click', (event) => {
count += 1;
likes.textContent = String(count);
console.log(event.type, event.target.id, count);
});
// once: this listener is removed after its first call.
like.addEventListener('click', () => console.log('thanks for the first like'), { once: true });
form.addEventListener('submit', (event) => {
event.preventDefault(); // handle it here: no page reload
log.textContent = 'Searching for ' + query.value.trim();
console.log(event.type, event.target.id, event.currentTarget === form);
});
query.addEventListener('keydown', (event) => {
console.log(event.type, event.key);
});
// The script tries its own page, the way the exercise tests do.
like.click();
like.click();
query.value = ' cats ';
form.requestSubmit();
query.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
console.log('likes shown:', likes.textContent);
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Listeners</title>
</head>
<body>
<button id="like" type="button">Like</button> <span id="likes">0</span>
<form id="search">
<input name="query" aria-label="Search">
<button>Search</button>
</form>
<p id="log">Nothing searched yet.</p>
<script type="module" src="main.js"></script>
</body>
</html>
To run the page on your computer, open index.html through a local web server, not as a file: browsers do not run module scripts from file:// addresses. For the checks, install jsdom first (the commands below).
Output
click like 1
thanks for the first like
click like 2
submit search true
keydown Escape
likes shown: 2
<!-- #log -->
<p id="log">Searching for cats</p>Tab indents and Shift+Tab outdents. To leave the editor with the keyboard, press Esc, then Tab.
The first run downloads the JavaScript runner (up to 0.1 MB) and keeps it cached. Your code runs in your browser’s own engine and stays on your device.
Your page
Your page runs in an isolated frame. It has no access to this site, and its localStorage is kept in memory for this run only: the next run starts empty.
Run the program to see its page here.
Exercise 1 of 2
As the user types into #status, the page should update on every input event: #preview shows the text exactly as typed, as text, and #count shows its length out of 40, such as "5 / 40". When the text is longer than 40 characters, #count gets the class over; when it is short enough again, the class goes. The starter listens for change, which fires only when the field loses focus, and updates only the preview.
Tab indents and Shift+Tab outdents. To leave the editor with the keyboard, press Esc, then Tab.
The first run downloads the JavaScript runner (up to 0.1 MB) and keeps it cached. Your code runs in your browser’s own engine and stays on your device.
Your page
Your page runs in an isolated frame. It has no access to this site, and its localStorage is kept in memory for this run only: the next run starts empty.
Run the program to see its page here.
Run the tests: nothing changes, because the tests send input events and the starter listens for change.
Listen for 'input', read field.value once into a constant, and set both textContent values from it.
Use an if...else with text.length > 40 and count.classList.add('over') or remove('over').
One way to solve it. Yours can look different and still pass the checks.
const field = document.querySelector('#status');
const count = document.querySelector('#count');
const preview = document.querySelector('#preview');
field.addEventListener('input', () => {
const text = field.value;
preview.textContent = text;
count.textContent = text.length + ' / 40';
if (text.length > 40) {
count.classList.add('over');
} else {
count.classList.remove('over');
}
});
Install ECMAScript 2026 or newer. Save these files in one folder, open a terminal in that folder, and run the commands below.
main.js
const field = document.querySelector('#status');
const count = document.querySelector('#count');
const preview = document.querySelector('#preview');
// TODO: update the preview and the count on every input event.
field.addEventListener('change', () => {
preview.textContent = field.value;
});
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';
const type = (page, text) => {
const field = page.document.querySelector('#status');
field.value = text;
field.dispatchEvent(new page.window.Event('input', { bubbles: true }));
};
test('Typing updates the preview', async () => {
const page = await loadPage();
type(page, 'Hello');
const text = page.document.querySelector('#preview').textContent;
assert.equal(text, 'Hello', 'after typing Hello the preview shows ' + JSON.stringify(text));
});
test('The count shows the length out of 40', async () => {
const page = await loadPage();
type(page, 'Hello');
const text = page.document.querySelector('#count').textContent;
assert.equal(text, '5 / 40', 'after typing Hello the count shows ' + JSON.stringify(text));
});
test('Markup in the text is shown as text', async () => {
const page = await loadPage();
type(page, '<b>hi</b>');
const preview = page.document.querySelector('#preview');
assert.equal(preview.children.length, 0, 'the preview built ' + preview.children.length + ' element(s) from the text');
});
test('Text over 40 characters gives the count the class over', async () => {
const page = await loadPage();
type(page, 'x'.repeat(41));
const over = page.document.querySelector('#count').classList.contains('over');
assert.equal(over, true, 'after 41 characters the count has no class over');
});
test('Shorter text removes the class over again', async () => {
const page = await loadPage();
type(page, 'x'.repeat(41));
type(page, 'ok');
const over = page.document.querySelector('#count').classList.contains('over');
assert.equal(over, false, 'after shortening the text the count still has the class over');
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Status</title>
</head>
<body>
<label for="status">Your status</label>
<input id="status">
<p id="count">0 / 40</p>
<p id="preview"></p>
<script type="module" src="main.js"></script>
</body>
</html>
package.json
{
"type": "module"
}
package.json tells Node.js that the .js files are modules; keep it in the folder.
Run the program:
To run the page on your computer, open index.html through a local web server, not as a file: browsers do not run module scripts from file:// addresses. For the checks, install jsdom first (the commands below).
Run the checks (needs learnrun.js in the same folder):
npm install jsdom@28.1.0
node --testExercise 2 of 2
On submit, the form should add the trimmed text of its field entry to #list as a new li, then clear the field. An empty or blank entry adds nothing. The listener must call event.preventDefault(), so a real page would not reload. Pressing Escape in the field clears it; other keys leave it alone. The starter adds untrimmed text, adds blanks, never clears the field or cancels the submit, and ignores Escape.
Tab indents and Shift+Tab outdents. To leave the editor with the keyboard, press Esc, then Tab.
The first run downloads the JavaScript runner (up to 0.1 MB) and keeps it cached. Your code runs in your browser’s own engine and stays on your device.
Your page
Your page runs in an isolated frame. It has no access to this site, and its localStorage is kept in memory for this run only: the next run starts empty.
Run the program to see its page here.
Run the tests: " tea " is added with its spaces, blanks are added, and the submit is not cancelled.
Give the listener the parameter event and call event.preventDefault() first. Trim the value, and return early when it is ''.
For Escape: entry.addEventListener('keydown', (event) => { … }) and compare event.key with 'Escape'.
One way to solve it. Yours can look different and still pass the checks.
const form = document.querySelector('#add');
const list = document.querySelector('#list');
const entry = form.elements.entry;
form.addEventListener('submit', (event) => {
event.preventDefault();
const text = entry.value.trim();
if (text === '') return;
const li = document.createElement('li');
li.textContent = text;
list.append(li);
entry.value = '';
});
entry.addEventListener('keydown', (event) => {
if (event.key === 'Escape') entry.value = '';
});
Install ECMAScript 2026 or newer. Save these files in one folder, open a terminal in that folder, and run the commands below.
main.js
const form = document.querySelector('#add');
const list = document.querySelector('#list');
// TODO: cancel the submit, trim, skip blanks, clear the field after adding.
form.addEventListener('submit', () => {
const li = document.createElement('li');
li.textContent = form.elements.entry.value;
list.append(li);
});
// TODO: pressing Escape in the field clears it.
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';
const add = (page, text) => {
page.document.querySelector('#add').elements.entry.value = text;
page.document.querySelector('#add').requestSubmit();
};
const shown = (page) => [...page.document.querySelectorAll('#list li')].map((li) => li.textContent);
const field = (page) => page.document.querySelector('#add').elements.entry;
test('Submitting adds the text to the list', async () => {
const page = await loadPage();
add(page, 'milk');
assert.deepEqual(shown(page), ['milk'], 'the list shows ' + JSON.stringify(shown(page)));
});
test('The text is trimmed and the field is cleared', async () => {
const page = await loadPage();
add(page, ' tea ');
assert.deepEqual(shown(page), ['tea'], 'the list shows ' + JSON.stringify(shown(page)));
assert.equal(field(page).value, '', 'after adding, the field holds ' + JSON.stringify(field(page).value));
});
test('A blank entry adds nothing', async () => {
const page = await loadPage();
add(page, ' ');
assert.deepEqual(shown(page), [], 'the list shows ' + JSON.stringify(shown(page)));
});
test('The submit is cancelled with preventDefault()', async () => {
const page = await loadPage();
const form = page.document.querySelector('#add');
let cancelled = false;
form.addEventListener('submit', (event) => {
cancelled = event.defaultPrevented;
});
add(page, 'milk');
assert.equal(cancelled, true, 'the submit event was not cancelled');
});
test('Escape clears the field', async () => {
const page = await loadPage();
field(page).value = 'oops';
field(page).dispatchEvent(new page.window.KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
assert.equal(field(page).value, '', 'after Escape the field holds ' + JSON.stringify(field(page).value));
});
test('Other keys leave the field alone', async () => {
const page = await loadPage();
field(page).value = 'tea';
field(page).dispatchEvent(new page.window.KeyboardEvent('keydown', { key: 'a', bubbles: true }));
assert.equal(field(page).value, 'tea', 'after the key a the field holds ' + JSON.stringify(field(page).value));
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shopping</title>
</head>
<body>
<form id="add">
<input name="entry" aria-label="New item">
<button>Add</button>
</form>
<ul id="list"></ul>
<p>Press Escape to clear the field.</p>
<script type="module" src="main.js"></script>
</body>
</html>
package.json
{
"type": "module"
}
package.json tells Node.js that the .js files are modules; keep it in the folder.
Run the program:
To run the page on your computer, open index.html through a local web server, not as a file: browsers do not run module scripts from file:// addresses. For the checks, install jsdom first (the commands below).
Run the checks (needs learnrun.js in the same folder):
npm install jsdom@28.1.0
node --testfunction save(event) {
console.log('saved by', event.target.id);
}
document.querySelector('#save').addEventListener('click', save());
What Node.js prints
TypeError: Cannot read properties of undefined (reading 'target')Why, and the fix
save() with parentheses calls the function at once, while the page loads, with no event, so event is undefined. addEventListener should get the function itself, to call later with the event: addEventListener('click', save). Had save not touched event, there would be no error, and the click would simply do nothing. Firefox and Safari word this message differently.
const form = document.querySelector('#add');
// The field is <input name="item">: read what it starts with.
const start = form.elements.item.value.trim();
console.log(start);
What Node.js prints
TypeError: Cannot read properties of undefined (reading 'trim')Why, and the fix
form.elements is a collection, and every collection has a method item(index). That method wins over a field named item, so form.elements.item is a function, and its value is undefined. Inside a listener, li.textContent = form.elements.item.value would even fail silently and show nothing. Use form.elements.namedItem('item'), or give the field another name, such as entry.
const buttons = document.querySelectorAll('button');
buttons.addEventListener('click', () => console.log('clicked'));
What Node.js prints
TypeError: buttons.addEventListener is not a functionWhy, and the fix
Listeners belong to single elements; a NodeList has no addEventListener. Add one to each button in a loop: for (const button of buttons) button.addEventListener('click', …). Lesson B6.4 shows a better way for many similar elements: one listener on their common parent.
JavaScript in the browser: your browser’s own engine, in a sandboxed worker. Syntax errors are located with acorn 8.18.0, MIT. Licence and source
5 questions, no hints. Score 80% or more to complete the lesson.
Finish every activity above to unlock the exit ticket.