Advertisement
Guest User

Untitled

a guest
Mar 22nd, 2018
109
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.22 KB | None | 0 0
  1. var shoppingCart = [];
  2.  
  3. //this function manipulates DOM and displays content of our shopping cart
  4. function displayShoppingCart(){
  5. var orderedProductsTblBody=document.getElementById("orderedProductsTblBody");
  6. //ensure we delete all previously added rows from ordered products table
  7. while(orderedProductsTblBody.rows.length>0) {
  8. orderedProductsTblBody.deleteRow(0);
  9. }
  10.  
  11. //variable to hold total price of shopping cart
  12. var cart_total_price=0;
  13. //iterate over array of objects
  14. for(var product in shoppingCart){
  15. //add new row
  16. var row=orderedProductsTblBody.insertRow();
  17. //create three cells for product properties
  18. var cellName = row.insertCell(0);
  19. var cellDescription = row.insertCell(1);
  20. var cellPrice = row.insertCell(2);
  21. cellPrice.align="right";
  22. //fill cells with values from current product object of our array
  23. cellName.innerHTML = shoppingCart[product].Name;
  24. cellDescription.innerHTML = shoppingCart[product].Description;
  25. cellPrice.innerHTML = shoppingCart[product].Price;
  26. cart_total_price+=shoppingCart[product].Price;
  27. }
  28. //fill total cost of our shopping cart
  29. document.getElementById("cart_total").innerHTML=cart_total_price;
  30. }
  31.  
  32.  
  33. function AddtoCart(name,description,price){
  34. //Below we create JavaScript Object that will hold three properties you have mentioned: Name,Description and Price
  35. var singleProduct = {};
  36. //Fill the product object with data
  37. singleProduct.Name=name;
  38. singleProduct.Description=description;
  39. singleProduct.Price=price;
  40. //Add newly created product to our shopping cart
  41. shoppingCart.push(singleProduct);
  42. //call display function to show on screen
  43. displayShoppingCart();
  44.  
  45. }
  46.  
  47.  
  48.  
  49.  
  50. // html
  51.  
  52.  
  53. <table cellpadding="4" cellspacing="4" border="1">
  54. <tr>
  55. <td valign="top">
  56. <table cellpadding="4" cellspacing="4" border="0">
  57. <thead>
  58. <tr>
  59. <td colspan="2">
  60. Products for sale
  61. </td>
  62. </tr>
  63. </thead>
  64. <tbody>
  65. <tr>
  66. <td>
  67. Table
  68. </td>
  69. <td>
  70. <input type="button" value="Add to cart" onclick="AddtoCart('Table','Big red table',50)"/>
  71. </td>
  72. </tr>
  73. <tr>
  74. <td>
  75. Door
  76. </td>
  77. <td>
  78. <input type="button" value="Add to cart" onclick="AddtoCart('Door','Yellow Door',150)"/>
  79. </td>
  80. </tr>
  81. <tr>
  82. <td>
  83. Car
  84. </td>
  85. <td>
  86. <input type="button" value="Add to cart" onclick="AddtoCart('Ferrari','Ferrari S234',150000)"/>
  87. </td>
  88. </tr>
  89. </tbody>
  90.  
  91. </table>
  92. </td>
  93. <td valign="top">
  94. <table cellpadding="4" cellspacing="4" border="1" id="orderedProductsTbl">
  95. <thead>
  96. <tr>
  97. <td>
  98. Name
  99. </td>
  100. <td>
  101. Description
  102. </td>
  103. <td>
  104. Price
  105. </td>
  106. </tr>
  107. </thead>
  108. <tbody id="orderedProductsTblBody">
  109.  
  110. </tbody>
  111. <tfoot>
  112. <tr>
  113. <td colspan="3" align="right" id="cart_total">
  114.  
  115. </td>
  116. </tr>
  117. </tfoot>
  118. </table>
  119. </td>
  120. </tr>
  121. </table>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement