Menambahkan Pembelian Baru di Kalkulator Produk

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

javascriptadd.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:

javascriptfunction createCell(tr, value, name) {
  
}

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

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