Byvoeging van nuwe aankope in produkkalkulator

Om te begin, laat ons dit so maak dat 'n nuwe ry met 'n aankop by die tabel gevoeg word wanneer op die knoppie gedruk word:

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

Die oplossing wat ek gegee het, het egter duidelike probleme met kodeduplikasie: in wese skryf ons dieselfde kode vir elke sel.

Dit sou gepas wees om 'n funksie te hê vir die skep van 'n tabelsel. Laat hierdie funksie die eerste parameter 'n verwysing na die tabelry neem, die tweede parameter die teks van die tabelsel, en die derde die naam van die CSS-klas van die sel:

function createCell(tr, value, name) {
	
}

Met so 'n funksie sou ons die bostaande kode soos volg kon herskryf:

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

Implementeer die funksie createCell wat ek beskryf het.

Kopieer my kode vir die byvoeging van 'n nuwe aankop. Toets die byvoeging van 'n nuwe aankop by die tabel.

Wysig die funksie createCell sodat dit die geskepde tabelsel via return teruggee.