Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.

JAVASCRIPT FORMS / CHAPTER 05 / Learn / LESSON 02

Read Controls.

About 5–10 minutes

Theory. Every field has .value — but it is always a string. Text inputs, number inputs, and selects give their value as text. Read them at the moment of the event (click), not at load — the user has not typed anything yet.

input[type=number].value returns "3", not 3. For math use Number(el.value). select.value is the value of the selected option (not the visible text).

Small examples:

const qty = document.querySelector("#qty"); const n = Number(qty.value); const cat = document.querySelector("#cat").value;

In Code Lab the host fills the fields and clicks the button — you write the listener.

Common mistake: reading value outside the listener; adding "3" + "4" and getting "34"; expecting the visible option text instead of its value.

Your lesson

On #go click read #title, #qty, and #cat and write into #out: <title> x<count> (<category>). Count = Number(qty.value). Read inside the listener. The host fills two different value sets and clicks after each — both results must be correct (first "Coffee x3 (fun)", then "Milk x4 (food)").

HTML (exactly this fixture):
<input id="title" type="text"><input id="qty" type="number" value="1"><select id="cat"><option value="food">Food</option><option value="fun">Fun</option></select><button id="go" type="button">Show</button><p id="out"></p>

The host does this after Run (in order):
1. setValue #title = "Coffee"
2. setValue #qty = "3"
3. setValue #cat = "fun"
4. click #go
5. setValue #title = "Milk"
6. setValue #qty = "4"
7. setValue #cat = "food"
8. click #go

<input id="title" type="text"><input id="qty" type="number" value="1"><select id="cat"><option value="food">Food</option><option value="fun">Fun</option></select><button id="go" type="button">Show</button><p id="out"></p>

value is always a string; use Number for numbers; select.value is the option value.

lesson_02.jsJAVASCRIPT · PAGE

Loading the runtime… The first launch may take a little longer.

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

Press Run — HTML loads in a sandbox iframe; Stop removes the iframe (also kills infinite loops).

01first click: Coffee x3 (fun)

02second click: Milk x4 (food)

03#qty 4 and #cat food

ConsoleWrite the code. Bring it online.

›

Progress in Profile →

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.

Loading…

JAVASCRIPT LABKALKULATORI.BG

<input id="title" type="text"><input id="qty" type="number" value="1"><select id="cat"><option value="food">Food</option><option value="fun">Fun</option></select><button id="go" type="button">Show</button><p id="out"></p>