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.