Προσθήκη Χειριστών Γεγονότων σε Βρόχο σε JavaScript

Στο προηγούμενο μάθημα μάθαμε να δημιουργούμε νέα στοιχεία σε βρόχο. Ας δένομε τώρα χειριστές γεγονότων κατά τη δημιουργία νέων στοιχείων.

Ας υποθέσουμε ότι έχουμε πάλι αυτό το γονικό div:

<div id="parent"></div>

Ας εκτελέσουμε έναν βρόχο που θα προσθέσει στο τέλος του div μας 9 νέες παραγράφους, δένοντάς τους έναν χειριστή κλικ:

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let p = document.createElement('p');
	p.textContent = '!';
	
	// Δένουμε τον χειριστή κλικ:
	p.addEventListener('click', function() {
		console.log(this.textContent);
	});
	
	parent.appendChild(p);
}

Δίνεται ένα div. Εκτελέστε έναν βρόχο που θα προσθέσει στο div μας 5 πεδία εισόδου. Ας υποθέσουμε ότι υπάρχει επίσης μια παράγραφος. Κάντε έτσι ώστε κάθε ένα από τα νέα πεδία εισόδου, κατά την απώλεια εστίασης, να γράφει το κείμενό του στην παράγραφο.