Édition d'un élément individuel en JavaScript

Maintenant, nous allons apprendre à éditer les textes des éléments à l'aide de champs de saisie. Commençons par des choses simples et complexifions progressivement.

Ainsi, supposons que nous ayons un paragraphe et un input, situés dans le même parent :

<div id="parent">
	<p id="elem">text</p>
	<input id="input">
</div>

Faisons en sorte qu'à la perte du focus dans l'input, son texte apparaisse dans le paragraphe :

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Faisons maintenant en sorte qu'au chargement de la page, le texte du paragraphe soit déjà dans l'input. Ainsi, nous pourrons utiliser l'input pour éditer le texte situé dans le paragraphe.

Implémentons :

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.value = elem.textContent; // écrivons dans l'input le texte du paragraphe

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Modifiez le code ci-dessus pour que le texte du paragraphe change non pas à la perte de focus, mais au fur et à mesure de la saisie dans l'input.

Apparition de l'input

Faisons maintenant en sorte que l'input ne soit initialement pas sur la page, mais qu'il apparaisse au clic sur le paragraphe. C'est-à-dire que notre HTML initial ressemblera à ceci :

<div id="parent">
	<p id="elem">text</p>
</div>

Pour commencer, implémentons simplement l'apparition de l'input, sans l'édition :

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.parentElement.appendChild(input);
});

Et maintenant, faisons en sorte qu'à la perte de focus dans l'input, le texte du paragraphe change :

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
	});
	
	elem.parentElement.appendChild(input);
});

Notre code, cependant, est imparfait, car chaque clic sur le paragraphe entraînera l'apparition d'un nouvel input.

Pour résoudre le problème, supprimons simplement l'input courant à la perte de focus :

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // supprimons l'input
	});
	
	elem.parentElement.appendChild(input);
});

Indépendamment, sans regarder mon code, résolvez la tâche décrite.