100円
200円
300円
合計円
注文
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; }