Kosa la Usafishaji Mzazi usiofaa katika JavaScript

Wacha tuwe na orodha fulani. Wacha kubonyeza kitufe tukitaka kila wakati kuunda tena orodha hii, ukisafisha yaliyomo yake ya awali. Wanafunzi wapya mara nyingi hufanya kosa, wakijaribu kubuni ufumbuzi mgumu wowote. Wacha tuangalie chaguo rahisi.

Wacha tupate orodha kwenye kutofautisha:

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

Wacha tupate pia kitufe:

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

Wacha kubonyeza kitufe orodha yetu ijazwe na thamani fulani. Kwa mfano nimechukua thamani ya nasibu, inayolingana na sekunde ya sasa:

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

Katika msimbo ulio hapo juu, vipengele vipya vya orodha vitaongezwa baada ya vile vilivyopo tayari. Na sisi tungependa, vipengele vya awali kwanza viondolewe. Suluhisho ni rahisi - inahitajika tu kusafisha maandishi ya kitini chetu ul:

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