JavaScriptでの要素グループ編集

ここでは、1つの段落ではなく複数あるとします：

<p>text1</p>
<p>text2</p>
<p>text3</p>

任意の段落をクリックすると、編集用の入力フィールドが表示されるようにしましょう。

実際、この課題は前のレッスンですでにほとんどのコードを取得しているため、難しいものではありません。

この課題を解決するには、段落に対してループを実行し、そのループ内で前のレッスンのコードを使用するだけです（このコードは変更する必要さえありません）：

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = elem.textContent;
		
		elem.textContent = '';
		elem.appendChild(input);
		
		input.addEventListener('blur', function() {
			elem.textContent = this.value;
			elem.addEventListener('click', func);
		});
		
		elem.removeEventListener('click', func);
	});
}

タグ ul が与えられています。任意の li をクリックすると、その li のテキストを編集できる入力フィールドが表示されるようにしてください。

HTMLテーブルが与えられています。任意のセルをクリックすると、そのセルのテキストを編集するための入力フィールドが表示されるようにしてください。