Маҳсулотлар ҳисоблангичига янгі харид қўшиш

Бошлаш учун, тугма босилганда жадвалга янги харид қатори қўшиладиган қилиб қўйайлик:

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

Мен келтирган ечим, аммо, кодни такрорлаш билан aniq muammolarga эга: аслнда ҳар бир ҳужайра учун биз бир хил кодни ёзамиз.

Жадвал ҳужайрасини яратиш учун маълум бир функцияга эга бўлиш муносиб бўлар эди. Бу функция биринчи параметр сифатида жадвал қаторига ишорани қабул қилсин, иккинчи параметр сифатида - жадвал ҳужайрасининг матнини, учинчиси - ҳужайранинг 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 орқали яратилган жадвал ҳужайрасини қайтарсин.