Tilføjelse af nyt køb i madvareregneren

Til at starte med, lad os gøre det sådan at der tilføjes en ny række med et køb i tabellen når der klikkes på knappen:

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

Min præsenterede løsning har dog tydelige problemer med kodeduplikering: faktisk skriver vi den samme kode for hver celle.

Det ville være passende at have en funktion til at oprette en tabelcelle. Lad denne funktion tage en reference til tabelrækken som første parameter, anden parameter - cellens tekst, og tredje - navnet på cellens CSS-klasse:

function createCell(tr, value, name) {
	
}

Med en sådan funktion kunne vi omskrive ovenstående kode på følgende måde:

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

Implementer den funktion createCell som jeg har beskrevet.

Kopier min kode for tilføjelse af et nyt køb. Test tilføjelsen af et nyt køb i tabellen.

Modificer funktionen createCell sådan, at den returnerer den oprettede tabelcelle via return.