Inputs

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can read what someone types with .value.
• I can react on every keystroke with the input event.
• I can turn typed text into a number with Number().

Timing

Predict and Run 10 min · Investigate 15 min · Modify 10 min · Make 15 min

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

Answers to the checks

1. Predict: You type Sam in the box and click Greet. What does the paragraph say?
   Hello, Sam! nameBox.value is read at the moment of the click, and + joins the three pieces of text.
2. Which part does what?: Match each piece with what it does.
   msg.addEventListener("input", …) → C. runs on every keystroke in the box; msg.value → B. the text in the box right now; msg.value.length → A. how many characters are in the box; Number(a.value) → D. turns the typed text into a number
3. 4 and 5: Someone types 4 and 5 in two boxes, and you write a.value + b.value. What do you get?
   "45", because the values are text
   The value of an input is always text, so + joins the two pieces of text: "4" + "5" is "45". Number(a.value) + Number(b.value) is 9.
4. Spot the bug: The page shows 45 instead of 9. There is no red error. Click the line that is wrong.
   line 9
   a.value and b.value are text, so + joins them. Turn each into a number first: Number(a.value) + Number(b.value).
5. Where this leads: You want to add a new line to a list every time someone clicks Add. What must your code make?
   A new element, then put it into the page
   The page only changes when your code changes it. To add a line, make a new element and add it to the list. Next lesson.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Make Add add

<input id="a" value="4"> +
<input id="b" value="5">
<button id="add">Add</button>
<p id="sum"></p>
<script>
  const a = document.querySelector("#a");
  const b = document.querySelector("#b");
  document.querySelector("#add").addEventListener("click", function () {
    document.querySelector("#sum").textContent = Number(a.value) + Number(b.value);
  });
</script>

Modify › A length limit

<textarea id="msg" rows="3" cols="30" placeholder="Type here"></textarea>
<p><span id="count">0</span> characters</p>
<p id="warning"></p>
<script>
  const msg = document.querySelector("#msg");
  const count = document.querySelector("#count");
  const warning = document.querySelector("#warning");
  msg.addEventListener("input", function () {
    count.textContent = msg.value.length;
    if (msg.value.length > 20) {
      warning.textContent = "Too long!";
      warning.style.color = "red";
    } else {
      warning.textContent = "";
    }
  });
</script>

a calculator of your own

<h1>Tip calculator</h1>
<input id="amount" placeholder="Bill in dollars">
<button id="go">Work out a 10% tip</button>
<p id="answer"></p>
<script>
  const amount = document.querySelector("#amount");
  const answer = document.querySelector("#answer");
  document.querySelector("#go").addEventListener("click", function () {
    const bill = Number(amount.value);
    if (isNaN(bill)) {
      answer.textContent = "Please type a number.";
    } else {
      answer.textContent = "Tip: $" + (bill * 0.1).toFixed(2);
    }
  });
</script>

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.

Exit ticket

Why is "4" + "5" equal to "45"?

The value of an input is text, and + joins text. Number() turns it into a number first.

What each step is for

• Investigate: .value is the text typed so far, and an input event fires on every keystroke; because it is text, turn it into a number with Number() before doing sums.
• Modify: Number() turns typed text into a number so sums work; an if inside the handler reacts to what was typed.
• a calculator of your own: Goals only: read an input, turn it into a number, work something out and show it on the page.

Where it leads

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