Redigering in 'n groep elemente op JavaScript

Laat ons nou aanneem daar is nie een paragraaf nie, maar baie:

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

Laat ons dit so maak dat, met 'n klik op enige paragraaf, 'n invoerveld (input) vir redigering daarin verskyn.

Eintlik stel hierdie taak nie 'n groot uitdaging vir ons nie, aangesien byna al die kode reeds in die vorige les verkry is.

Om ons probleem op te los, sal ons eenvoudig 'n sirkulasie oor die paragrawe loop en in die sirkulasie die kode van die vorige les gebruik (hierdie kode hoef nie eers verander te word nie):

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

Gegee die ul etiket. Maak dit so dat met 'n klik op enige li, 'n invoerveld daarin verskyn, waarmee jy die teks van daardie li kan redigeer.

Gegee 'n HTML-tabel. Maak dit so dat met 'n klik op enige sel, 'n invoerveld vir die redigering van die teks van daardie sel daarin verskyn.