Дадаванне новай пакупкі ў калькулятары прадуктаў
Для пачатку давайце зробім так, каб па націсканні на кнопку ў табліцу дадаваўся новы рад з пакупкай:
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 = 'выдаліць';
td.classList.add('remove');
tr.appendChild(td);
table.appendChild(tr);
});
Прыведзенае мною рашэнне, аднак, мае відавочныя праблемы з дубляваннем кода: фактычна для кожнай ячэйкі мы пішем адзін і той жа код.
Даречна было б мець нейкую функцыю для стварэння ячэйкі табліцы. Хай гэтая функцыя першым параметрам прымае спасылку на рад табліцы, другім параметрам - тэкст ячэйкі табліцы, а трэцім - імя CSS класа ячэйкі:
function createCell(tr, value, name) {
}
Маючы такую функцыю мы б змаглі перапісаць прыведзены вышэй код наступным чынам:
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, 'выдаліць', 'remove');
table.appendChild(tr);
});
Рэалізуйце апісаную мною функцыю createCell.
Скапіюйце мой код для дадавання новай пакупкі. Пратэстуйце дадаванне новай пакупкі ў табліцу.
Мадыфікуйце функцыю createCell так,
каб яна вяртала праз return
створаную ячэйку табліцы.