Ürün Hesaplayıcısında Yeni Alışveriş Ekleme

Başlangıç olarak, düğmeye tıklandığında tabloya yeni bir alışveriş satırı eklenmesini sağlayalım:

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

Ancak benim sunduğum çözümün belirgin kod tekrarı sorunları var: aslında her bir hücre için aynı kodu yazıyoruz.

Bir tablo hücresi oluşturmak için bir fonksiyona sahip olmak uygun olurdu. Bu fonksiyonun ilk parametresi tablo satırına bir referans alsın, ikinci parametresi hücre metni, üçüncü parametresi ise hücrenin CSS sınıfı adı olsun:

javascriptfunction createCell(tr, value, name) {
  
}

Böyle bir fonksiyona sahip olarak, yukarıdaki kodu aşağıdaki şekilde yeniden yazabilirdik:

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