0

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

} 
2
Contributors
1
Reply
3
Views
5 Years
Discussion Span
Last Post by Airshow
0

viewShoppingCart() puts two new tables inot the document each time it is called, therefore the number of tables will grow and grow.

You can approach this a number of ways, eg:

  • Ensure that viewShoppingCart() deletes any existing cart tables before inserting new.
  • Hard code your main table and mini-table in HTML, complete with headers row and tbody. Then, ensure that viewShoppingCart() clears the two tables' tbodys before repopulating them with new rows.

The second approach is preferred as it is more economical - avoiding the need to re-create tables and headers every time the cart is viewed.

Have you learned about javascript constructor functions yet? If so, you would get more marks for your project by refactoring the code to use them. For example you could have a Cart() contructor and a CartItem() constructor. This approach would be expected on a university level Computing/Computer Science course, but maybe not on a Computing Awareness module in Business Studes etc.

Edited by Airshow: typos corrected

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.