Fout met verkeerde skoonmaak van ouer in JavaScript

Kom ons sê ons het 'n sekere lys. Kom ons sê met elke klik op 'n knoppie wil ons hierdie lys elke keer weer vorm, deur die vorige inhoud skoon te maak. Beginners maak gereeld 'n fout deur te probeer om 'n ingewikkelde oplossing te bedink. Kom ons kyk na 'n eenvoudige weergawe.

Kom ons sê ons kry die lys in 'n veranderlike:

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

Kom ons sê ons kry ook die knoppie:

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

Kom ons sê dat by 'n klik op die knoppie ons lys met sekere waardes gevul word. Vir die voorbeeld het ek 'n ewekansige waarde geneem, ooreenstemmend met die huidige sekonde:

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

In die bostaande kode sal nuwe lyspunte agter die reeds bestaandes gevoeg word. Maar ons wil hê dat vorige punte eers verwyder moet word. Die oplossing is eenvoudig - ons moet net die teks van ons ul-tag skoonmaak:

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