Mahsulotlar kalkulyatorida yangi xarid qo'shish

Boshlanishiga, tugmani bosganimizda jadvalga yangi qator bilan xarid qo'shiladigan qilaylik:

add.addEventListener('click', function() {
	let tr = document.createElement('tr');
	
	let td;
	
	td = document.createElement('td');
	td.textContent = name.value;
	td.classList.add('name');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = price.value;
	td.classList.add('price');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = amount.value;
	td.classList.add('amount');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = price.value * amount.value;
	td.classList.add('cost');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = 'o\'chirish';
	td.classList.add('remove');
	tr.appendChild(td);
	
	table.appendChild(tr);
});

Mening keltirgan yechimim, biroq, aniq muammolarga ega kodni takrorlash bilan: aslida har bir katakcha uchun biz bir xil kodni yozamiz.

Jadval katakchasini yaratish uchun ma'lum bir funktsiyani o'rnatish maqsadga muvofiq bo'lar edi. Bu funktsiya birinchi parametr sifatida jadval qatoriga havolani, ikkinchi parametr sifatida - jadval katakchasining matnini, uchinchisi esa - katakcha CSS klass nomini qabul qilsin:

function createCell(tr, value, name) {
	
}

Bunday funktsiyaga ega bo'lsak, biz yuqoridagi kodni quyidagicha qayta yozishimiz mumkin edi:

add.addEventListener('click', function() {
	let tr = document.createElement('tr');
	
	createCell(tr, name.value, 'name');
	createCell(tr, price.value, 'price');
	createCell(tr, amount.value, 'amount');
	createCell(tr, price.value * amount.value, 'cost');
	createCell(tr, 'o\'chirish', 'remove');
	
	table.appendChild(tr);
});

Men tavsiflagan createCell funktsiyasini amalga oshiring.

Yangi xarid qo'shish kodini menga nusxalang. Jadvalga yangi xarid qo'shishni sinab ko'ring.

createCell funktsiyasini shunday o'zgartiringki, u return orqali yaratilgan jadval katakchasini qaytarsin.