Ürün Hesaplayıcısında Yeni Alışveriş Ekleme

Başlangıç olarak, düğmeye tıklandığında tabloya yeni bir alışveriş satırı eklenmesini sağlayalım:

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);
});

Ancak benim sunduğum çözümün belirgin kod tekrarı sorunları var: aslında her bir hücre için aynı kodu yazıyoruz.

Bir tablo hücresi oluşturmak için bir fonksiyona sahip olmak uygun olurdu. Bu fonksiyonun ilk parametresi tablo satırına bir referans alsın, ikinci parametresi hücre metni, üçüncü parametresi ise hücrenin CSS sınıfı adı olsun:

function createCell(tr, value, name) {
	
}

Böyle bir fonksiyona sahip olarak, yukarıdaki kodu aşağıdaki şekilde yeniden yazabilirdik:

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);
});

Tarif ettiğim createCell fonksiyonunu uygulayın.

Yeni alışveriş ekleme kodumu kopyalayın. Tabloya yeni alışveriş eklemeyi test edin.

createCell fonksiyonunu, oluşturulan tablo hücresini return ile döndürecek şekilde değiştirin.