Məhsul kalkulyatorunda yeni alış-verişin əlavə edilməsi

Əvvəlcə gəlin düyməyə kliklədikdə cədvələ yeni bir sətirin əlavə olunmasını təmin edək:

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

Təqdim etdiyim həllin aşkar problemləri var: əslində hər bir xana üçün eyni kodu yazırıq.

Cədvəl xanası yaratmaq üçün bir funksiyanın olması məqsədəuyğun olardı. Bu funksiya birinci parametr kimi cədvəl sətirinə istinad, ikinci parametr kimi cədvəl xanasının mətnini, üçüncü parametr kimi isə xananın CSS sinif adını qəbul etsin:

javascriptfunction createCell(tr, value, name) {
  
}

Belə bir funksiyaya sahib olmaqla yuxarıdakı kodu aşağıdakı kimi yenidən yaza bilərik:

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