Data on a web page travels in steps: the user types, JavaScript reads the box, the program works with the value, and the result is written back to the screen. The key fact is that a box always gives you text.
This lesson belongs to web development without assessed-project substitution. It uses a practice page, so the code here is not any student’s project.
What path does a value take?
There are four stages. Keep them separate in your head, because a bug lives in exactly one of them.
| Stage | What happens | Where the value is |
|---|---|---|
| 1. Input | The user types in a box | Inside the box, as text |
| 2. Read | JavaScript reads the box value | In a variable, still text |
| 3. Process | Convert and calculate | In a variable, now a number |
| 4. Output | Write the result to an element | On the screen, as text |
Worked example: adding two quiz marks
A fictional class page has two boxes, quiz1 and quiz2, and a paragraph with id total. Mr Faiz types 14 and 9.
<input id="quiz1"> <input id="quiz2">
<button id="add">Add</button>
<p id="total"></p>document.getElementById("add").addEventListener("click", function () {
var a = document.getElementById("quiz1").value;
var b = document.getElementById("quiz2").value;
document.getElementById("total").textContent = a + b;
});Trace it after the click.
| Step | Code | a | b | Type |
|---|---|---|---|---|
| 1 | read quiz1 | “14” | not yet | text |
| 2 | read quiz2 | “14” | “9” | text |
| 3 | a + b | “14” | “9” | joins to “149” |
| 4 | write to total | screen shows 149 |
The page shows 149, not 23. The fault is at stage 3: adding two texts joins them.
The mistake and the fix
A common assumption is that the program knows a box holding 14 contains a number. It does not, so the trace must mark each value as text or number.
The fix converts before adding.
var a = Number(document.getElementById("quiz1").value);
var b = Number(document.getElementById("quiz2").value);
document.getElementById("total").textContent = a + b;Now a is 14 and b is 9, both numbers, and 14 + 9 = 23. The screen shows 23.
| Without Number() | With Number() | |
|---|---|---|
| a | “14” | 14 |
| b | “9” | 9 |
| a + b | “149” | 23 |
What if the box is empty?
An empty box gives the empty text “”. Number(“”) gives 0, so a blank quiz mark silently counts as zero. Trace this case too, because it shows why validation matters, which the next lesson covers.
Check yourself
Boxes hold “6” and “3”. The code is var r = a * b where a and b come straight from the boxes’ value. What does r hold, and does the page need Number() here?
Answer
JavaScript converts text to numbers when you multiply, so “6” * “3” gives 18. The page would show 18 without Number().
Addition is the exception because + also joins text. Still, converting with Number() in all cases is a safer habit, because it makes each step’s type clear in your trace.
What to study next
Once the value path is clear, test what happens when the input is wrong with separating client-side feedback from server-side validation. Then record your traces using the mistake log and paper-error review.
For a teacher to trace practice pages with you, see online one-to-one Computer Science tuition.