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 het zelf.

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.

Investigate

Experimenteer in het veld hierboven:

• Vul niets in en klik op de knop. Wat komt er in de zin te staan?
• Haal Number(...) weg rond de leeftijd en typ 5. Welke leeftijd belooft de zin je nu, en waarom?
• Haal de haakjes om (leeftijd + 10) weg. Wat verandert er aan de uitkomst?

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