meet it

Each kind of field hands over its answer in its own way.

<input type="number"> shows a box with little arrows, but its .value is still a string. Wrap it in Number() before doing any maths.

A has no words to read. Its property is true when it is ticked and false when it is not, ready for an if.

A is a <select> holding <option> choices. Its .value is the chosen option's value attribute, so your code gets a tidy name like "large", whatever the label says.

<form id="order">
  <input id="cups" type="number" value="2">
  <select id="size">
    <option value="small">Small (£2)</option>
    <option value="large">Large (£3)</option>
  </select>
  <label><input id="cream" type="checkbox"> Add cream</label>
  <button>Order</button>
</form>
<p id="total"></p>

const cups = document.querySelector("#cups");
const size = document.querySelector("#size");
const cream = document.querySelector("#cream");
document.querySelector("#order").addEventListener("submit", (event) => {
  event.preventDefault();
  let each = 2;
  if (size.value === "large") { each = 3; }
  if (cream.checked) { each = each + 1; }
  document.querySelector("#total").textContent = `Total: £${Number(cups.value) * each}`;
});

Press run it to bring the page to life.

console

nothing logged yet

The <label> tag wraps a checkbox and its words, so clicking the words ticks the box too.

guess first

The VIP box is ticked, then the button pressed. What shows?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<input id="tickets" type="number" value="3">
<label><input id="vip" type="checkbox"> VIP seats</label>
<button id="price">Work out the price</button>
<p id="cost"></p>

const tickets = document.querySelector("#tickets");
const vip = document.querySelector("#vip");
document.querySelector("#price").addEventListener("click", () => {
  let each = 5;
  if (vip.checked) { each = 8; }
  document.querySelector("#cost").textContent = `£${Number(tickets.value) * each}`;
});

your turn

Your turn. Take a pizza order.

Fill in the property that holds the chosen base, then the one that says whether olives are ticked. Press run, pick Deep pan, tick Olives and order.

the page your code works on

<form id="pizza">
  <select id="base">
    <option value="thin">Thin crust</option>
    <option value="deep">Deep pan</option>
  </select>
  <label><input id="olives" type="checkbox"> Olives</label>
  <button>Order</button>
</form>
<p id="ticket"></p>

your javascript

Your code

Press run it to bring the page to life.

console

nothing logged yet

the ticket says A deep pizza with olivesnot checked yet

fix it

Nobody ticked the box, but sprinkles appear! Fix it!

the page your code works on

<form id="cone">
  <label><input id="sprinkles" type="checkbox"> Sprinkles</label>
  <button>Get my ice cream</button>
</form>
<p id="treat"></p>

your javascript

Broken code to fix

Press run it to bring the page to life.

console

nothing logged yet

no tick means no sprinklesnot checked yet
the box stays untickednot checked yet

Look at the condition inside the if. Is it asking a question or giving an order?
One = puts true into checked, which ticks the box. To ask, use .checked on its own.
Change sprinkles.checked = true to sprinkles.checked on line 5, then press run.

nailed it

your forms understand every kind of field. :D

Number boxes still give strings, so use Number().
A checkbox's .checked is true or false.
A dropdown's .value is the chosen option's value.

new words in your collection

checkbox
checked
dropdown

This lesson isn’t saved. A free account remembers every lesson you finish.