Vale vanema puhastamise viga JavaScriptis

Oletame, et meil on mingi nimekiri. Oletame, et nupu vajutamise tahame iga kord uuesti moodustada selle nimekirja, puhastades selle eelmise sisu. Algajad teevad sageli vea, püüdes leiutada mingit keerulist lahendust. Vaatame lihtsat varianti.

Oletame, et saame nimekirja muutujasse:

let ul = document.querySelector('ul');

Oletame, et saame ka nupu:

let btn = document.querySelector('button');

Oletame, et nupu vajutamisel meie nimekiri täidetakse mingite väärtustega. Näiteks võtsin juhusliku väärtuse, vastavalt praegusele sekundile:

btn.addEventListener('click', function() {
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});

Eelpool toodud koodis lisatakse uued nimekirja punktid juba olemasolevate järele. Kuid me sooviksime, et eelmised punktid kõigepealt eemaldataks. Lahendus on lihtne - tuleb lihtsalt puhastada meie sildi ul tekstisisu:

btn.addEventListener('click', function() {
	ul.textContent = ''; // puhastame nimekirja
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});