JavaScript samenvatting
Hieronder staan handige JavaScript commando's die we geleerd hebben in deze module.
Alert, getElementById(), element.innerHTML, element.style
| JavaScript | Wat doet het? |
|---|---|
alert("Boe!"); |
Maak een pop-up scherm |
let naam = prompt("Hoe heet je?"); |
Vraag om invoer van de gebruikers |
let paragraaf = document.getElementById("par"); |
Haal element uit HTML pagina |
paragraaf.innerHTML = "Nieuwe inhoud"; |
Verander tekst tussen de tags |
paragraaf.outerHTML = "<p id='par'>Hoi</p>"; |
Verander tekst inclusief de tags |
kop1.style.color = "red"; |
Verander de kleur (style) |
kop1.style.font = "15px arial, sans-serif"; |
Verander het font (style) |
Console.log()
| JavaScript | Wat doet het? |
|---|---|
console.log("Dit is een boodschap."); |
Print een boodschap op de console |
addEventListener(), getElementsByClassName(), getElementsByTagName()
| JavaScript | Wat doet het? |
|---|---|
knop.addEventListener("click", functieNaam); |
Klikken op knop gebruiken |
par.addEventListener("click", functieNaam); |
Klikken op een paragraaf |
par.addEventListener("mouseover", functieNaam); |
Reageren op muis op element |
document.getElementsByClassName("kleur") |
Vind alle elementen met class = kleur |
document.getElementsByTagName("strong") |
Vind alle <strong> elementen |
Loop door alle elementen van getElementsByClassName()
let invoervelden = document.getElementsByClassName("invoer");
for (let i = 0; i < invoervelden.length; i++){
invoervelden[i].style.color = "red";
}
Vaak voorkomende foutmeldingen
| Console | Waardoor komt het waarschijnlijk? |
|---|---|
cannot read property innerHTML of null |
Spelfout gemaakt in het id van HTML element |
ReferenceError: verander is not defined |
verander is niet gemaakt of typefout |