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:

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 = '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:

function createCell(tr, value, name) {
	
}

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

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

Təsvir etdiyim createCell funksiyasını həyata keçirin.

Yeni alış-verişin əlavə edilməsi üçün mənim kodumu kopyalayın. Cədvələ yeni alış-verişin əlavə edilməsini sınayın.

createCell funksiyasını elə dəyişin ki, return vasitəsilə yaradılmış cədvəl xanasını qaytarsın.