Modifica in un gruppo di elementi in JavaScript
Ora supponiamo di avere non un paragrafo, ma molti:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Facciamo in modo che cliccando su qualsiasi paragrafo appaia un input per la modifica.
In realtà questo compito non è difficile per noi, poiché quasi tutto il codice è stato ottenuto da noi nella lezione precedente.
Per risolvere il nostro compito, basta eseguire un ciclo attraverso i paragrafi e nel ciclo utilizzare il codice della lezione precedente (non sarà nemmeno necessario modificare questo codice):
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);
});
}
Dato il tag ul. Fai in modo che
cliccando su qualsiasi li appaia
un input, con cui è possibile modificare
il testo di questa li.
Data una tabella HTML. Fai in modo che cliccando su qualsiasi cella appaia un input per modificare il testo di quella cella.