JavaScript өнімдер калькуляторында жаңа сатып алуды қосу

Алдымен түймені басқан кезде кестеге жаңа сатып алу қатары қосылатын етейік:

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 = 'жою';
	td.classList.add('remove');
	tr.appendChild(td);
	
	table.appendChild(tr);
});

Мен ұсынған шешімде кодты қайталаумен анық проблемалар бар: әдетте әрбір ұяшық үшін біз бірдей кодты жазамыз.

Кесте ұяшығын жасау үшін қандай да бір функцияға ие болу қолайлы болар еді. Бұл функция бірінші параметр ретінде кесте қатарына сілтемені, екінші параметр ретінде - кесте ұяшығының мәтінін, ал үшіншісі - ұяшықтың CSS класының атауын қабылдайды:

function createCell(tr, value, name) {
	
}

Осындай функцияға ие болу арқылы біз жоғарыда келтірілген кодты келесі түрде қайта жаза аламыз:

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, 'жою', 'remove');
	
	table.appendChild(tr);
});

Мен сипаттаған createCell функциясын жүзеге асырыңыз.

Жаңа сатып алуды қосу үшін менің кодымды көшіріңіз. Кестеге жаңа сатып алуды қосуды сынап көріңіз.

createCell функциясын return арқылы жасалған кесте ұяшығын қайтаратын етіп өзгертіңіз.