Ga naar hoofdinhoud

prompt en alert

Tot nu toe stond alle tekst vast in je code. Met twee ingebouwde functies praat je pagina met de gebruiker: alert() toont een bericht, prompt() stelt een vraag.

alert(): toon een berichtvenster​

alert('Hallo wereld.');

Er verschijnt een pop-upvenster met je tekst en een OK-knop. De code wacht tot de gebruiker op OK klikt.

prompt(): vraag om invoer​

const naam = prompt('Hoe heet je?');

Een pop-upvenster vraagt om tekst. Wat de gebruiker typt, komt in de variabele naam te staan. Daarna kun je die waarde gebruiken, bijvoorbeeld door hem met + aan een andere tekst te plakken:

const naam = prompt('Hoe heet je?');
alert('Welkom, ' + naam + '.');
Wanneer wel/niet?
  • Wel: snelle demo, mini-oefening, één losse vraag.
  • Niet: een echte website. Pop-ups zijn storend, blokkeren de pagina en zijn niet te stylen. Daarvoor leer je later formulieren uitlezen.

Predict​

Wat verschijnt er in de console als de gebruiker 16 typt?

const leeftijd = prompt('Hoe oud ben je?');
console.log(leeftijd + 4);
Wat denk je: 20, of iets anders?

164. Alles wat uit prompt() komt is tekst, ook als de gebruiker een getal typt. + plakt teksten aan elkaar: '16' + 4 wordt '164'. Waarom dat zo werkt en hoe je er wél mee rekent, leer je in Waarden en operatoren.

Probeer het zelf.​

Editor laden...

Investigate​

Experimenteer in het veld hierboven:

  • Klik op de knop en kies bij de prompt direct Cancel. Wat staat er dan op de pagina, en wat vind je daarvan?
  • Wat gebeurt er als je niets typt en op OK klikt?
  • Verwijder de alert-regel. Wat merk je bij het klikken?

Opdracht 1: Lievelingskleur​

Pas de startcode aan: de knop heet "Vraag mijn kleur", de prompt vraagt "Wat is je lievelingskleur?", en op de pagina verschijnt "Mooie kleur, " gevolgd door het antwoord.

Editor laden...
Tip

Je hoeft alleen teksten aan te passen: de vraag in prompt(...), de zin die je plakt, en de tekst op de knop.

Antwoord

HTML:

<button id="knop">Vraag mijn kleur</button>

script.js:

function vraagNaam() {
  const kleur = prompt('Wat is je lievelingskleur?');
  alert('Mooie kleur.');
  document.getElementById('uitvoer').textContent = 'Mooie kleur, ' + kleur + '.';
}

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

De functienaam mag blijven; je mag hem ook hernoemen naar vraagKleur, als je hem dan óók in de koppelregel onderaan aanpast.

Opdracht 2: Twee vragen​

Vraag met twee prompts naar de naam én de hobby van de gebruiker, en toon daarna één zin op de pagina: "Ik ben (naam) en ik hou van (hobby)."

Editor laden...
Tip

Twee prompts betekent twee variabelen. Plak de zin daarna in stukken aan elkaar met +, en vergeet de spaties in de tussenstukken niet.

Antwoord
function vraagNaam() {
  const naam = prompt('Hoe heet je?');
  const hobby = prompt('Wat is je hobby?');
  document.getElementById('uitvoer').textContent =
    'Ik ben ' + naam + ' en ik hou van ' + hobby + '.';
}

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

Opdracht 3: Verhaaltjesmachine​

Bouw een verhaaltjesmachine: vraag met drie prompts om een naam, een dier en een plaats, en zet daarna een gek verhaaltje met die drie woorden op de pagina. Sluit af met een alert dat het verhaal klaarstaat.

Editor laden...
Tip

Schrijf een functie maakVerhaal en koppel hem met addEventListener aan de knop. Drie prompts, drie variabelen, en één lange geplakte zin naar textContent.

Antwoord
function maakVerhaal() {
  const naam = prompt('Een naam:');
  const dier = prompt('Een dier:');
  const plaats = prompt('Een plaats:');
  document.getElementById('verhaal').textContent =
    naam + ' fietste naar ' + plaats + ' en kwam daar een pratende ' + dier + ' tegen.';
  alert('Je verhaal staat klaar.');
}

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

Er gaat iets mis​

De plus vergeten bij het plakken

alert('Hallo ' naam);
Uncaught SyntaxError: missing ) after argument list

Tussen elk stuk tekst en elke variabele hoort een +. Zonder die plus begrijpt JavaScript de regel niet meer en stopt het script meteen — er verschijnt dan helemaal geen pop-up. Controleer bij deze foutmelding of elke overgang tekst-variabele een + heeft: alert('Hallo ' + naam);.