javascript · level 2 · unit 1 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Put a new value in .textContent and the page changes.
.textContent works both ways. Read it to see an element's words. Put a new string into it with = and the old words vanish, replaced on the page at once. It is the same = you use for any variable.
Any value works. A template literal can build the words from variables, and a number turns into text by itself: points.textContent = 15; shows 15.
If your selector matches nothing, querySelector hands back , which means nothing is here. Asking null for its .textContent crashes with a TypeError, so check the spelling and the #.
<h1 id="greeting">Hello, stranger!</h1>
<p id="points">0</p>const player = "Sam";
const greeting = document.querySelector("#greeting");
const points = document.querySelector("#points");
greeting.textContent = `Welcome back, ${player}!`;
points.textContent = 3 * 5;Press run it to bring the page to life.
console
nothing logged yet
Your HTML stays the same. The code changes the live page in the browser.
guess first
Two changes to one sign. What does the page show?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<h1 id="sign">Closed</h1>const sign = document.querySelector("#sign");
sign.textContent = "Open";
sign.textContent = "Back in 5 minutes";your turn
Your turn. Put yourself on the scoreboard.
Type your name between the quotes and any number of goals in the second blank. Press run and the scoreboard shows both.
the page your code works on
<h2 id="player">Player</h2>
<p id="goals">0 goals</p>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- the heading shows your namenot checked yet
- the goals line shows a numbernot checked yet
fix it
The quiz crashes with a TypeError. Fix it!
the page your code works on
<h1 id="question">What is 7 times 6?</h1>
<p id="answer">Think about it...</p>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- the answer says It is 42!not checked yet
- A TypeError about
nullmeansquerySelectorfound nothing. Look closely at what it searched for. - Compare the id in the brackets on line 1 with the id in the HTML. Two letters are swapped.
- Change #anwser to #answer on line 1, then press run.
nailed it
you rewrote the page from your code. :D
- Put a new value into
.textContentwith=to change the words. - The last value you put in is the one people see.
nullmeans nothing matched, so check your selector.
new words in your collection
- null
This lesson isn’t saved. A free account remembers every lesson you finish.