Édition dans un groupe d'éléments en JavaScript

Supposons maintenant que nous n'ayons pas un seul paragraphe, mais plusieurs :

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

Faisons en sorte qu'un clic sur n'importe quel paragraphe fasse apparaître un champ de saisie pour l'édition.

En réalité, cette tâche n'est pas difficile pour nous, car presque tout le code a été obtenu dans la leçon précédente.

Pour résoudre notre problème, lançons simplement une boucle sur les paragraphes et utilisons le code de la leçon précédente dans la boucle (ce code n'aura même pas besoin d'être modifié) :

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);
	});
}

Étant donné la balise ul. Faites en sorte qu'au clic sur n'importe quelle li, un champ de saisie apparaisse, permettant de modifier le texte de cet li.

Étant donné un tableau HTML. Faites en sorte qu'au clic sur n'importe quelle cellule, un champ de saisie apparaisse pour modifier le texte de cette cellule.