Jauna pirkuma pievienošana produktu kalkulatorā

Sākumā darīsim tā, lai, nospiežot uz pogas, tabulā pievienotos jauna rinda ar pirkumu:

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 = 'dzēst';
	td.classList.add('remove');
	tr.appendChild(td);
	
	table.appendChild(tr);
});

Manis dots risinājums tomēr ir ar acīmredzamām problēmām ar koda dublēšanu: faktiski katrai šūnai mēs rakstām vienu un to pašu kodu.

Būtu lietderīgi izveidot kādu funkciju tabulas šūnas izveidošanai. Ļaujiet šai funkcijai pirmo parametru pieņemt kā atsauci uz tabulas rindu, otro parametru - kā šūnas tekstu, un trešo - kā šūnas CSS klases nosaukumu:

function createCell(tr, value, name) {
	
}

Ja mums būtu šāda funkcija, mēs varētu pārrakstīt iepriekš minēto kodu šādi:

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, 'dzēst', 'remove');
	
	table.appendChild(tr);
});

Realizējiet manis aprakstīto funkciju createCell.

Nokopējiet manu kodu jauna pirkuma pievienošanai. Testējiet jauna pirkuma pievienošanu tabulā.

Modificējiet funkciju createCell tā, lai tā atgrieztu caur return izveidoto tabulas šūnu.