Menambahkan Pembelian Baru di Kalkulator Produk

Untuk memulainya, mari kita buat agar saat menekan tombol, baris baru dengan pembelian ditambahkan ke dalam tabel:

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

Solusi yang saya berikan, bagaimanapun, memiliki masalah duplikasi kode yang jelas: sebenarnya untuk setiap sel kita menulis kode yang sama.

Akan lebih tepat untuk memiliki suatu fungsi untuk membuat sel tabel. Biarkan fungsi ini menerima parameter pertama referensi ke baris tabel, parameter kedua - teks sel tabel, dan parameter ketiga - nama kelas CSS sel:

function createCell(tr, value, name) {
	
}

Dengan memiliki fungsi seperti itu, kita dapat menulis ulang kode di atas sebagai berikut:

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

Implementasikan fungsi createCell yang saya jelaskan.

Salin kode saya untuk menambahkan pembelian baru. Uji coba penambahan pembelian baru ke dalam tabel.

Modifikasi fungsi createCell sehingga fungsi tersebut mengembalikan via return sel tabel yang dibuat.