Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

JAVASCRIPT FORMS / CHAPTER 05 / Учене / LESSON 02

Четене на контроли.

Около 5–10 минути

Теория. Всяко поле има .value — но то винаги е низ. Текстово поле, number поле и select дават стойност като текст. Прочети ги в момента на събитието (клик), не при зареждане — тогава потребителят още не е написал нищо.

input[type=number].value връща "3", не 3. За сметки ползвай Number(el.value). select.value е value на избраната опция (не видимият текст).

Малки примери:

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

Хостът в Code Lab сам попълва полетата и кликва бутона — ти пишеш слушателя.

Честа грешка: да четеш value извън слушателя; да събираш "3" + "4" и да получиш "34"; да очакваш видимия текст на опцията вместо нейния value.

Твоят урок

При клик на #go прочети #title, #qty и #cat и напиши в #out: <title> x<брой> (<категория>). Брой = Number(qty.value). Чети в слушателя. Хостът попълва два различни комплекта стойности и кликва след всеки — и двата резултата трябва да са верни (първо "Coffee x3 (fun)", после "Milk x4 (food)").

HTML (точно този фиксчър):
<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>

Хостът прави това след Run (по ред):
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 е винаги низ; за число ползвай Number; select.value е value на опцията.

lesson_02.jsJAVASCRIPT · PAGE

Зареждаме средата… При първо стартиране може да отнеме малко повече.

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

Натисни Run — HTML се зарежда в sandbox iframe; Stop маха iframe-а (спира и безкраен цикъл).

01първи клик: Coffee x3 (fun)

02втори клик: Milk x4 (food)

03#qty 4 и #cat food

КонзолаНапиши кода. Включи системата.

›

Прогрес в Профила →

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

Зареждане…

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>