Event listeners toevoegen in een lus in JavaScript
In de vorige les hebben we geleerd hoe we nieuwe elementen in een lus kunnen maken. Laten we nu event handlers gaan toevoegen bij het creëren van nieuwe elementen.
Stel dat we weer een ouder div-element hebben zoals dit:
<div id="parent"></div>
Laten we een lus starten die 9 nieuwe alinea's
aan het einde van onze div toevoegt en er een
klik-handler op plaatst:
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let p = document.createElement('p');
p.textContent = '!';
// Voeg klik-handler toe:
p.addEventListener('click', function() {
console.log(this.textContent);
});
parent.appendChild(p);
}
Gegeven een div. Start een lus die
5 invoervelden aan onze div toevoegt.
Stel dat er ook een alinea is. Zorg ervoor dat
elk van de nieuwe invoervelden bij verlies van focus
zijn tekst in de alinea schrijft.
