← The DOM and the browser console

Inputs

Read what someone types with .value, react as they type, and turn text into a number with Number().

Search boxes, sign-up forms and calculators all do the same two things: read what you typed, and answer.

An input box has a value: whatever is typed in it right now. Read it inside a handler:

out.textContent = "Hello, " + nameBox.value + "!";

Two events are useful: "click" on a button, and "input" on the box itself, which fires on every keystroke.

The hard part is that .value is always text, even when someone types a number. "4" + "5" is "45", not 9. Turn it into a number first: Number(a.value).

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

page.html
<input id="name" placeholder="Your name">
<button id="greet">Greet</button>
<p id="out"></p>
<script>
  const nameBox = document.querySelector("#name");
  const out = document.querySelector("#out");
  document.querySelector("#greet").addEventListener("click", function () {
    out.textContent = "Hello, " + nameBox.value + "!";
  });
</script>

When is nameBox.value read: when the page loads, or when the button is clicked?

You type Sam in the box and click Greet. What does the paragraph say?

RunRun it and compare the result with your prediction.

Run

Press Run, then type in the box. The count changes on every keystroke, because the listener is on the "input" event.

page.html
<textarea id="msg" rows="3" cols="30" placeholder="Type here"></textarea>
<p><span id="count">0</span> characters</p>
<script>
  const msg = document.querySelector("#msg");
  const count = document.querySelector("#count");
  msg.addEventListener("input", function () {
    count.textContent = msg.value.length;
  });
</script>
Try it yourselfYour edits are saved in this browser.

InvestigateTrace how each line of code connects to what you see.

Investigate

page.html
<textarea id="msg" rows="3" cols="30" placeholder="Type here"></textarea>
<p><span id="count">0</span> characters</p>
<script>
  const msg = document.querySelector("#msg");
  const count = document.querySelector("#count");
  msg.addEventListener("input", function () {
    count.textContent = msg.value.length;
  });
</script>

Match code with meaning.

What + does to text.

The sum is wrong, and nothing complains.

Match each piece with what it does.

msg.addEventListener("input", …)
msg.value
msg.value.length
Number(a.value)

Someone types 4 and 5 in two boxes, and you write a.value + b.value. What do you get?

The page shows 45 instead of 9. There is no red error. Click the line that is wrong.

ModifyChange the code on purpose and check the result.

Modify

Numbers, not text.

Need a hint?

The page is adding text. What does + do with text?

Another hint

Wrap each value in Number(...): Number(a.value) + Number(b.value).

Show the expected result
What the finished page looks like
What it should look like. Your words can be different.

Decide as they type.

Need a hint?

An if inside the handler can look at how many characters there are.

Another hint

Add a paragraph for the warning, and if (msg.value.length > 20) { … } to fill it.

Show the expected result
What the finished page looks like
What it should look like. Your words can be different.
Try it yourselfYour edits are saved in this browser.

Make the Add button show 9 for 4 + 5.

    This ticks when your page has all of the above.

    Show Too long! in red when the message has more than 20 characters.

      This ticks when your page has all of the above.

      MakeBuild something new using what you have learned. Expect a few tries; that is normal.

      A calculator of your own

      Make a small tool that reads a number from a box and shows an answer: a tip calculator, a temperature converter (°C to °F), an age-in-days counter, a unit converter. Check for a bad number with isNaN(...), as the page on this lesson does.

      Try it yourselfYour edits are saved in this browser.

      Info

      Where this leads

      You can now read what people type. Next: build a list on the page.

      You want to add a new line to a list every time someone clicks Add. What must your code make?

      For teachers

      Students read an input with .value, react as they type with the input event, find that values are text and use Number() to add, and make a calculator or converter of their own. About 50 minutes.

      Open the teacher guide: answers, solutions, slides and a worksheet.

      Students will be able to

      Before class

      Read the unit primer first. This is the Python input() lesson with a twist: there is no program waiting, so the page reacts to an event. input fires on every keystroke; click on a button reads the box once. The big idea is that .value is always text, as input() was in Python: the same "45" surprise. The bug has no red error, so students must read the answer. Number("abc") is NaN; isNaN(x) checks for it, used in the Make example. The playground cannot send a form, on purpose: use a button and an event, not a <form>.

      Running the lesson

      1. Predict: ask when the value is read.
      2. Run: ask students to type quickly and say when the number changes.
      3. Investigate: ask what + does to two pieces of text.
      4. Modify: ask what Number("5") gives, and what Number("hello") gives.
      5. Make: ask each student what could go wrong if someone types words.

      The hard part (on purpose)

      Text versus number: "4" + "5" is "45". Show the page, ask what + does to text, and only then show Number().

      When students get stuck

      Stretch and support

      Stretch: Make the result appear live, with no button at all, using the input event on each box.

      Support: Give the greeting page and ask students to change only the words, then add a second box.

      Where it leads

      Next lesson: lists of elements: making new elements and adding them to the page.

      What each step is for

      Now you can
      Next lesson5. Building a listMake new elements with createElement and add them to the page, so a list can grow, one click at a time.