JavaScript өнімдер калькуляторында жаңа сатып алуды қосу

Алдымен түймені басқан кезде кестеге жаңа сатып алу қатары қосылатын етейік:

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

Мен ұсынған шешімде кодты қайталаумен анық проблемалар бар: әдетте әрбір ұяшық үшін біз бірдей кодты жазамыз.

Кесте ұяшығын жасау үшін қандай да бір функцияға ие болу қолайлы болар еді. Бұл функция бірінші параметр ретінде кесте қатарына сілтемені, екінші параметр ретінде - кесте ұяшығының мәтінін, ал үшіншісі - ұяшықтың CSS класының атауын қабылдайды:

javascriptfunction createCell(tr, value, name) {
  
}

Осындай функцияға ие болу арқылы біз жоғарыда келтірілген кодты келесі түрде қайта жаза аламыз:

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