Tilføjelse af event handlers i løkke på JavaScript
I den forrige lektion lærte vi at skabe nye elementer i en løkke. Lad os nu tilføje event handlers ved oprettelse af nye elementer.
Lad os igen have en forældre-div som denne:
<div id="parent"></div>
Lad os starte en løkke, der tilføjer
9 nye afsnit til slutningen af vores
div, og tilføjer en klik-handler til dem:
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let p = document.createElement('p');
p.textContent = '!';
// Tilføjer klik-handler:
p.addEventListener('click', function() {
console.log(this.textContent);
});
parent.appendChild(p);
}
Der gives en div. Start en løkke, der tilføjer
5 input-felter til vores div. Lad der også være givet
et afsnit. Gør sådan, at hvert af de nye
input-felter ved tab af fokus skriver sin tekst
i afsnittet.