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個のinput要素を追加するループを実行してください。また、段落（p要素）も与えられているとします。新しく追加された各inputがフォーカスを失った時（blurイベント）、そのinputのテキストを段落に書き込むようにしてください。