Dodavanje nove kupovine u kalkulatoru proizvoda
Za početak, hajde da učinimo da se klikom na dugme u tabelu doda novi red sa kupovinom:
add.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 = 'obriši';
td.classList.add('remove');
tr.appendChild(td);
table.appendChild(tr);
});
Međutim, moje predloženo rešenje ima očigledne probleme sa dupliranjem koda: zapravo za svaku ćeliju pišemo isti kod.
Bilo bi prikladno imati neku funkciju za kreiranje ćelije tabele. Neka ova funkcija kao prvi parametar prima referencu na red tabele, kao drugi parametar - tekst ćelije tabele, a kao treći - ime CSS klase ćelije:
function createCell(tr, value, name) {
}
Imajući ovakvu funkciju mogli bismo da prepišemo gore navedeni kod na sledeći način:
add.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, 'obriši', 'remove');
table.appendChild(tr);
});
Implementirajte funkciju createCell koju sam opisao.
Kopirajte moj kod za dodavanje nove kupovine. Testirajte dodavanje nove kupovine u tabelu.
Modifikujte funkciju createCell tako
da vraća preko return
kreiranu ćeliju tabele.