Hey i'm creating basic a shopping cart for a uni project, everything works however when I select the view cart button on my html page it appears, however if i select it repeatedly, the table creates a replica table below and does this everytime I select my button so I end up with lots of tables at the bottom of my page. Can anyone help!
//create the new arrays
var namesArray = new Array();
var quantityArray = new Array();
var sumArray = new Array();
var priceArray = new Array();
var totalPriceArray = new Array();
var titleArray = new Array();
//add to cart
function addToCart()
{
//president add to cart
var name = document.getElementById("presidentName").innerHTML; // gets the info by the div id from html
var price = document.getElementById("presidentPrice").innerHTML; // retrieves data from president price on html
price = parseFloat(price); // converts price string to a number that can have a decimal point
var quantity = document.getElementById("presidentAmount").value; //retrieves data from president amount
var total = price*quantity; // multiplys price by quantity
var presidentTotal = total; // assigning president total and total to be the same
namesArray.push(name); // adds president name to the names array on cart
priceArray.push(price); //adds president price to the price array on cart
quantityArray.push(quantity); // adds president quantity to the quantity array on cart
sumArray.push(total); //adds the sum of the total quantity to the total array
//seaworld add to cart
var name = document.getElementById("seaworldName").innerHTML;
var price = document.getElementById("seaworldPrice").innerHTML;
price = parseFloat(price);
var quantity = document.getElementById("seaworldAmount").value;
var total = price*quantity;
var seaworldTotal = total;
namesArray.push(name);
priceArray.push(price);
quantityArray.push(quantity);
sumArray.push(total);
//princesscharm add to cart
var name = document.getElementById("princesscharmName").innerHTML;
var price = document.getElementById("princesscharmPrice").innerHTML;
price = parseFloat(price);
var quantity = document.getElementById("princesscharmAmount").value;
var total = price*quantity;
var princesscharmTotal = total;
namesArray.push(name);
priceArray.push(price);
quantityArray.push(quantity);
sumArray.push(total);
//bride add to cart
var name = document.getElementById("brideName").innerHTML;
var price = document.getElementById("bridePrice").innerHTML;
price = parseFloat(price);
var quantity = document.getElementById("brideAmount").value;
var total = price*quantity;
var brideTotal = total;
namesArray.push(name);
priceArray.push(price);
quantityArray.push(quantity);
sumArray.push(total);
//dancingsamba add to cart
var name = document.getElementById("dancingsambaName").innerHTML;
var price = document.getElementById("dancingsambaPrice").innerHTML;
price = parseFloat(price);
var quantity = document.getElementById("dancingsambaAmount").value;
var total = price*quantity;
var dancingsambaTotal = total;
namesArray.push(name);
priceArray.push(price);
quantityArray.push(quantity);
sumArray.push(total);
//find out the total price of everything
var overallTotal = presidentTotal + seaworldTotal + princesscharmTotal + brideTotal + dancingsambaTotal;
totalPriceArray.push(overallTotal); // states like a sum, adds the overallTotal
}
//view cart
function viewShoppingCart()
{ //below I am adding declaring data into the title array
titleArray[0] = "Item Name"; //storing multiple bits of information
titleArray[1] = "Item Quantity";
titleArray[2] = "Item Price";
titleArray[3] = "Item Total";
titleArray[4] = "Total Price";
var tab=document.createElement("table"); //creating the table
document.getElementById("viewCartDiv").appendChild(tab); //Pull from view cart div
tab.setAttribute("border", "5"); //setting the borders
var tbdy=document.createElement("tbody");
tab.appendChild(tbdy);
var tr=document.createElement("tr");
tbdy.appendChild(tr);
var td=document.createElement("td");
td.appendChild(document.createTextNode(titleArray[0])); //item name
tr.appendChild(td);
var td=document.createElement("td");
td.appendChild(document.createTextNode(titleArray[1])); //item quantity
tr.appendChild(td);
var td=document.createElement("td");
td.appendChild(document.createTextNode(titleArray[2])); //item price
tr.appendChild(td);
var td=document.createElement("td");
td.appendChild(document.createTextNode(titleArray[3])); // item total
tr.appendChild(td);
for (var j=0; j<=4; j++)
{
var tr=document.createElement("tr");
tbdy.appendChild(tr);
var td= document.createElement("td");
td.appendChild(document.createTextNode(namesArray[j]));
tr.appendChild(td);
var td= document.createElement("td");
td.appendChild(document.createTextNode(quantityArray[j]));
tr.appendChild(td);
var td= document.createElement("td");
td.appendChild(document.createTextNode(priceArray[j]));
tr.appendChild(td);
var td= document.createElement("td");
td.appendChild(document.createTextNode(sumArray[j]));
tr.appendChild(td);
}
//total price mini-table
titleArray[0] = "Total Price";
var tab=document.createElement("table");
document.getElementById("viewCartDiv").appendChild(tab);
tab.setAttribute("border", "2");
var tbdy=document.createElement("tbody");
tab.appendChild(tbdy);
//title
var tr=document.createElement("tr");
tbdy.appendChild(tr);
var td=document.createElement("td");
td.appendChild(document.createTextNode(titleArray[4]));
tr.appendChild(td);
//value
var td= document.createElement("td");
td.appendChild(document.createTextNode(totalPriceArray[0]));
tr.appendChild(td);
}
