DOM and events · Lesson 8 of 10 · 10 minutes

DOM and events: Keyboard-friendly buttons

A native button already supports keyboard activation. A click listener can serve mouse, touch, and keyboard users.

Open the lab Course map

Mastery 0/3Run itExplain itApply it

Current edit

PreviewNo external resources

Your objectives

Hints are always available. Wrong turns never cost XP.

1
Build keyboard-friendly buttons
Build this first target: the JavaScript statements shown in the example, as executable-position code rather than a string or comment. Explain how the values and control flow implement this lesson’s concept; this browser lab checks structure without executing arbitrary JavaScript.
Hint & worked example
A native button already supports keyboard activation. A click listener can serve mouse, touch, and keyboard users.
The requested statements are present as code, not inside a string or comment. No arbitrary JavaScript is executed.
```
const button = document.querySelector("#start");
```
Common mistake to avoid: A string containing code executes automatically when it is assigned.
2
Extend the keyboard-friendly buttons example
Extend your file to include: the JavaScript statements shown in the example, as executable-position code rather than a string or comment. Explain how the values and control flow implement this lesson’s concept; this browser lab checks structure without executing arbitrary JavaScript.
Hint & worked example
A native button already supports keyboard activation. A click listener can serve mouse, touch, and keyboard users.
The requested statements are present as code, not inside a string or comment. No arbitrary JavaScript is executed.
```
const button = document.querySelector("#start");
function activate() { button.textContent = "Activated"; }
```
Common mistake to avoid: A successful element lookup guarantees that the rest of an event handler is correct.
3
Verify the complete keyboard-friendly buttons pattern
Finish the pattern with: the JavaScript statements shown in the example, as executable-position code rather than a string or comment. Explain how the values and control flow implement this lesson’s concept; this browser lab checks structure without executing arbitrary JavaScript.
Hint & worked example
A native button already supports keyboard activation. A click listener can serve mouse, touch, and keyboard users.
The requested statements are present as code, not inside a string or comment. No arbitrary JavaScript is executed.
```
const button = document.querySelector("#start");
function activate() { button.textContent = "Activated"; }
if (button) { button.addEventListener("click", activate); }
```
Common mistake to avoid: A string containing code executes automatically when it is assigned.

Understand the pattern

A native button already supports keyboard activation. A click listener can serve mouse, touch, and keyboard users.

Misconceptions to reject

A string containing code executes automatically when it is assigned.
A successful element lookup guarantees that the rest of an event handler is correct.

This is a code-inspection lab, not a full JavaScript runtime.

Worked example and expected result

const button = document.querySelector("#start");
function activate() { button.textContent = "Activated"; }
if (button) { button.addEventListener("click", activate); }

A native button already supports keyboard activation. A click listener can serve mouse, touch, and keyboard users.

Try a variation

Adapt the final example to a different project name while retaining its structure and relationships. A different context still needs a real browser and accessibility check.

Explain it

Which statement correctly explains keyboard-friendly buttons?A successful element lookup guarantees that the rest of an event handler is correct.A native button already supports keyboard activation. A click listener can serve mouse, touch, and keyboard users.A string containing code executes automatically when it is assigned.

Apply it elsewhere

You reuse keyboard-friendly buttons in a different project. What must still be verified?The input values, element availability, and actual behavior in a real browser.Nothing; passing a single exercise guarantees every future use.Only whether the source code has the same number of lines.

Keep the momentum.

Complete the lab, then explain and apply the pattern.

Next: DOM and events: Status announcements Try an incident drill

Anonymous lesson and mastery progress lasts for this session. Sign in to keep synced lesson XP between sessions; mastery stays device-local. No speed bonus, lost lives, or hint penalties.

Keep learning

MDN: JavaScript fundamentals