JavaScript-тегінің ата-ананы дұрыс тазаламау қатесі

Бізде белгілі бір тізім бар делік. Түймені басқан сайын, біз бұл тізімді олдың алдыңғы мазмұнын тазалап, әрдайым жаңадан құрғымыз келеді делік. Жаңадан келгендер жиі күрделі шешімдерді ойлап табуға тырысады. Қарапайым нұсқаны қарастырайық.

Тізімді айнымалыға алдық делік:

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

Сондай-ақ түймені де алдық делік:

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

Түймені басқан сайын біздің тізіміміз белгілі бір мәндермен толтырылсын делік. Мысал ретінде мен ағымдағы секунтқа сәйкес келетін кездейсоқ мәнді алдым:

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

Жоғарыда келтірілген кодта, тізімнің жаңа бөліктері қазірдің өзінде бар бөліктерден кейін қосылады. Ал біз алдыңғы бөліктердің алдымен жойылуын қалар едік. Шешім қарапайым - бізге тек ul тегінің мәтінін тазалау керек:

btn.addEventListener('click', function() {
	ul.textContent = ''; // тізімді тазалаймыз
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});