Önümler kalkulýatoryna täze satyn almagy goşmak

Başlangyçda, düwmä basylanynda tablisanyň üstüne täze bir hatar satyn almak goşulýandygy ýagdaýy edeliň:

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 = 'öçür';
	td.classList.add('remove');
	tr.appendChild(td);
	
	table.appendChild(tr);
});

Meniň getiren çözgüdime, şonyň bilen, kody ikileýänlikde anyk problemalar bar: aslynda her bir öýjük üçin biz birmeňzeş kody ýazýarys.

Tablisa öýjügini döretmek üçin belli bir funksiýanyň bolmagy maslahatdyr. Bu funksiýa birinji parametr hökmünde tablisa hataryna çykgyt, ikinji parametr hökmünde - tablisa öýjüginiň tekstini, üçünjisi bolsa öýjügiň CSS klasynyň adyny gabul etsin:

function createCell(tr, value, name) {
	
}

Şeýle bir funksiýa bolsa, ýokardaky kody aşakdaky ýaly ýazyp bilerdik:

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, 'öçür', 'remove');
	
	table.appendChild(tr);
});

Meniň düşündiren createCell funksiýamy amala aşyryň.

Täze satyn almagy goşmak üçin meniň kodymy göçürip alyň. Tablisada täze satyn almagy goşmagy synaň.

createCell funksiýany şeýle üýtgediň, ony return arkaly döredilen tablisa öýjügini yzyna gaytarsyn.