Formulier-data ophalen

In Formulieren bouwde je een formulier, maar typen leverde nog niets op. Met JavaScript lees je de ingevulde tekst uit via de eigenschap .value:

const naam = document.getElementById('naam-veld').value;

naam bevat nu wat de gebruiker typte — als string, altijd.

Voor welke velden werkt dit?

Element	Wat .value teruggeeft
<input type="text">	De getypte tekst
<input type="number">	De getypte tekst (nog steeds een string)
<textarea>	De inhoud van het tekstvak
<select>	De value van de gekozen <option>

Rekenen met invoer: eerst omzetten

Ook bij <input type="number"> is .value een string. Rekenen gaat dus via Number(), precies zoals bij prompt():

const leeftijd = Number(document.getElementById('leeftijd').value);
const overTienJaar = leeftijd + 10;

Predict

Wat staat er in bericht als de gebruiker "Hallo" typt in het naam-veld?

const naam = document.getElementById('naam').value;
const bericht = 'Welkom, ' + naam + '.';

Welke string wordt het?

'Welkom, Hallo.' — .value geeft letterlijk terug wat er in het veld staat, en dat wordt met + in de zin geplakt. Het veld heet "naam", maar JavaScript controleert niet wat voor tekst erin staat.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Vul niets in en klik op de knop. Wat komt er in de zin te staan?
   Antwoord

   Hoi . Over 10 jaar ben je 10 jaar. Een leeg veld geeft een lege string, dus de naam ontbreekt. Number('') is 0, en 0 plus 10 is 10.
2. Haal Number(...) rond de leeftijd weg, zodat er alleen document.getElementById('leeftijd').value staat. Typ 5 en klik. Welke leeftijd belooft de zin je nu, en waarom?
   Antwoord

   510 jaar. Zonder Number() is de leeftijd de string '5', en + plakt '5' en 10 aan elkaar in plaats van ze op te tellen.
3. Zet Number(...) terug en haal de haakjes om (leeftijd + 10) weg. Typ weer 5. Wat verandert er aan de uitkomst?
   Antwoord

   Er staat weer 510 jaar, ook al is leeftijd nu een getal. JavaScript werkt de +-tekens van links naar rechts af: eerst plakt hij de 5 achter de tekst, daarna de 10. De haakjes laten hem eerst rekenen.

Editor laden...

Waarom type="button" op de knop?

Een knop binnen een <form> verstuurt het formulier standaard (en herlaadt de pagina). Met type="button" voorkom je dat: de knop doet alleen wat de listener zegt.

Opdracht 1: Extra veld

Voeg een derde veld "Hobby" toe en breid de zin uit: "Hoi (naam). Over 10 jaar ben je (leeftijd+10) jaar en hopelijk hou je dan nog steeds van (hobby)."

Editor laden...

Tip

Een <label> en een <input type="text" id="hobby"> in de HTML, een derde .value-regel in de functie, en de zin verder opbouwen met +.

Antwoord

HTML-toevoeging in het formulier:

<label for="hobby">Hobby:</label>
<input type="text" id="hobby">

script.js:

function begroet() {
  const naam = document.getElementById('naam').value;
  const leeftijd = Number(document.getElementById('leeftijd').value);
  const hobby = document.getElementById('hobby').value;

  const bericht = 'Hoi ' + naam + '. Over 10 jaar ben je ' + (leeftijd + 10) +
    ' jaar en hopelijk hou je dan nog steeds van ' + hobby + '.';
  document.getElementById('uitvoer').textContent = bericht;
}

Opdracht 2: Dagdeel kiezen

Voeg een <select> toe met de opties ochtend, middag en avond. Kies de begroeting op basis van de keuze: "Goedemorgen, Lisa.", "Goedemiddag, Lisa." of "Goedenavond, Lisa."

Editor laden...

Tip

Ook een <select> lees je uit met .value. Kies de groet met if/else if/else uit Beslissingen.

Antwoord

HTML-toevoeging in het formulier:

<label for="moment">Wanneer?</label>
<select id="moment">
  <option value="ochtend">Ochtend</option>
  <option value="middag">Middag</option>
  <option value="avond">Avond</option>
</select>

script.js:

function begroet() {
  const naam = document.getElementById('naam').value;
  const moment = document.getElementById('moment').value;

  let groet;
  if (moment === 'ochtend') {
    groet = 'Goedemorgen';
  } else if (moment === 'middag') {
    groet = 'Goedemiddag';
  } else {
    groet = 'Goedenavond';
  }

  document.getElementById('uitvoer').textContent = groet + ', ' + naam + '.';
}

Opdracht 3: Mini-rekenmachine

Bouw de rekenmachine af: twee number-velden staan klaar, met een Bereken-knop. Toon na een klik de som, het verschil en het product, elk op een eigen regel.

Editor laden...

Tip

Beide waarden door Number(), en dan drie regels verzamelen in één string met '\n' ertussen — zoals bij Loops. De velden heten getal1 en getal2, de knop knop.

Antwoord

function reken() {
  const a = Number(document.getElementById('getal1').value);
  const b = Number(document.getElementById('getal2').value);

  const tekst = a + ' + ' + b + ' = ' + (a + b) + '\n' +
                a + ' - ' + b + ' = ' + (a - b) + '\n' +
                a + ' × ' + b + ' = ' + (a * b);

  document.getElementById('uitvoer').textContent = tekst;
}

document.getElementById('knop').addEventListener('click', reken);

Er gaat iets mis

Number-veld vergeten te converteren

const a = document.getElementById('getal1').value;  // string
const b = document.getElementById('getal2').value;  // string
console.log(a + b);  // '5' + '3' wordt '53', niet 8

.value is altijd een string, ook bij <input type="number">. Zonder Number(...) plakt + de waarden aan elkaar in plaats van op te tellen — dezelfde val als bij prompt(). Wikkel Number() om elke numerieke invoer:

const a = Number(document.getElementById('getal1').value);
const b = Number(document.getElementById('getal2').value);
console.log(a + b);  // 8