Javascript/カートシステム

商品①

100円

商品②

200円

商品③

300円

商品名 数量 小計

合計

JavaScript
const cart = document.getElementsByClassName("cart");
const ct = document.getElementById("ct");
var price01 = 0;
var price02 = 0;
var price03 = 0;
var sum = document.getElementById("sum");

function s1Func(){
	price01 = 100;
	var tr = document.createElement("tr");
	var ctr = ct.appendChild(tr);
	var td01 = document.createElement("td");
	td01.textContent = "商品①";
	ctr.appendChild(td01);
	var td02 = document.createElement("td");
	var input01 = document.createElement("input");
	input01.style.width = "20px";
	input01.setAttribute("type", "text");
	input01.value = 1;
	td02.appendChild(input01);
	ctr.appendChild(td02);
	var td03 = document.createElement("td");
	td03.textContent = "個";
	ctr.appendChild(td03);
	var td04 = document.createElement("td");
	td04.innerHTML = price01 + "円";
	ctr.appendChild(td04);
	cart[0].disabled = true;
	cart[0].innerHTML = "カートに挿入済";
	cart[0].classList.add("fff");
	sumCalc();
	input01.addEventListener("click", function(){
  		this.select();
	});
	input01.addEventListener("change", function(){
		price01 = input01.value * 100;
		td04.innerHTML = price01 + "円";
		sumCalc();
	});
}
cart[0].addEventListener("click", s1Func);

function s2Func(){
	price02 = 200;
	var tr = document.createElement("tr");
	var ctr = ct.appendChild(tr);
	var td01 = document.createElement("td");
	td01.textContent = "商品②";
	ctr.appendChild(td01);
	var td02 = document.createElement("td");
	var input01 = document.createElement("input");
	input01.style.width = "20px";
	input01.setAttribute("type", "text");
	input01.value = 1;
	td02.appendChild(input01);
	ctr.appendChild(td02);
	var td03 = document.createElement("td");
	td03.textContent = "個";
	ctr.appendChild(td03);
	var td04 = document.createElement("td");
	td04.innerHTML = price02 + "円";
	ctr.appendChild(td04);
	cart[1].disabled = true;
	cart[1].innerHTML = "カートに挿入済";
	cart[1].classList.add("fff");
	sumCalc();
	input01.addEventListener("click", function(){
  		this.select();
	});
	input01.addEventListener("change", function(){
		price02 = input01.value * 200;
		td04.innerHTML = price02 + "円";
		sumCalc();
	});
}
cart[1].addEventListener("click", s2Func);

function s3Func(){
	price03 = 300;
	var tr = document.createElement("tr");
	var ctr = ct.appendChild(tr);
	var td01 = document.createElement("td");
	td01.textContent = "商品③";
	ctr.appendChild(td01);
	var td02 = document.createElement("td");
	var input01 = document.createElement("input");
	input01.style.width = "20px";
	input01.setAttribute("type", "text");
	input01.value = 1;
	td02.appendChild(input01);
	ctr.appendChild(td02);
	var td03 = document.createElement("td");
	td03.textContent = "個";
	ctr.appendChild(td03);
	var td04 = document.createElement("td");
	td04.innerHTML = price03 + "円";
	ctr.appendChild(td04);
	cart[2].disabled = true;
	cart[2].innerHTML = "カートに挿入済";
	cart[2].classList.add("fff");
	sumCalc();
	input01.addEventListener("click", function(){
  		this.select();
	});
	input01.addEventListener("change", function(){
		price03 = input01.value * 300;
		td04.innerHTML = price03 + "円";
		sumCalc();
	});
}
cart[2].addEventListener("click", s3Func);

function sumCalc(){
	sum.innerHTML = price01 + price02 + price03;
}