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