Modifica di un elemento singolo in JavaScript

Ora impareremo a modificare i testi degli elementi utilizzando campi di input. Iniziamo con cose semplici e aumentiamo gradualmente la complessità.

Quindi, supponiamo di avere un paragrafo e un input, posizionati nello stesso genitore:

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

Facciamo in modo che quando l'input perde il focus, il suo testo appaia nel paragrafo:

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

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

Ora facciamo in modo che all'ingresso nella pagina, nell'input ci sia già il testo del paragrafo. In questo modo, tramite l'input, potremo modificare il testo posizionato nel paragrafo.

Implementiamo:

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

input.value = elem.textContent; // scriviamo nell'input il testo del paragrafo

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

Modificate il codice sopra in modo che il testo del paragrafo cambi non alla perdita del focus, ma man mano che si digita il testo nell'input.

Comparsa dell'input

Ora facciamo in modo che l'input inizialmente non sia presente sulla pagina, ma appaia al click sul paragrafo. Cioè il nostro HTML iniziale sarà così:

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

Per iniziare, implementiamo semplicemente la comparsa dell'input, senza modifica:

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

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

E ora facciamo in modo che alla perdita del focus nell'input, cambi il testo del paragrafo:

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

Tuttavia, il nostro codice non è perfetto, poiché ogni click sul paragrafo porterà alla comparsa di un nuovo input.

Per risolvere il problema, semplicemente alla perdita del focus, cancelleremo l'input corrente:

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(); // cancelliamo l'input
	});
	
	elem.parentElement.appendChild(input);
});

In autonomia, senza guardare il mio codice, risolvete il problema descritto.