Attaching handlers in a loop in JavaScript

In the previous lesson, we learned how to create new elements in a loop. Let's now hang event handlers when creating new elements.

Let us again have such a parent div:

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

Let's run a loop that will add 9 new paragraphs to the end of our div, attaching a click handler to them:

let parent = document.querySelector('#parent'); for (let i = 1; i <= 9; i++) { let p = document.createElement('p'); p.textContent = '!'; // Attaching a click handler: p.addEventListener('click', function() { console.log(this.textContent); }); parent.appendChild(p); }

Given a div. Run a loop that will add 5 inputs to our div. Let there be a paragraph. Make it so that each of the new inputs writes its text into a paragraph when focus is lost.

enru