Jauna pirkuma pievienošana produktu kalkulatorā

Sākumā darīsim tā, lai, nospiežot uz pogas, tabulā pievienotos jauna rinda ar pirkumu:

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

Manis dots risinājums tomēr ir ar acīmredzamām problēmām ar koda dublēšanu: faktiski katrai šūnai mēs rakstām vienu un to pašu kodu.

Būtu lietderīgi izveidot kādu funkciju tabulas šūnas izveidošanai. Ļaujiet šai funkcijai pirmo parametru pieņemt kā atsauci uz tabulas rindu, otro parametru - kā šūnas tekstu, un trešo - kā šūnas CSS klases nosaukumu:

javascriptfunction createCell(tr, value, name) {
  
}

Ja mums būtu šāda funkcija, mēs varētu pārrakstīt iepriekš minēto kodu šādi:

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