how to make a shopping cart in javascript

Question

I'm having trouble making a shopping cart using Javascript for a project. I made buttons called Add to Cart, and I tried various ways so that when I click on the button, I add the product's name and price to the cart. I tried button onclick, but it isn't working. I tried addEventListener, but it shows the product information when I'm not clicking on the button for some reason. How can I make it so that when I click the button, it shows up the product information in the cart? Also, how do I need to create element div (the code I commented out below)?

I also don't know how I can show the product image on the shopping cart.

    var shoppingCart = [];
    
    function addToCart(title, price) {
     var product = {};
     product.title = title;
     product.price = price;
     shoppingCart.push(product);
     displayShoppingCart();
    }
    
    
    function displayShoppingCart() {
     var totalPrice = 0;
     var displayTitle = document.getElementById("displayTitle");
     var displayPrice = document.getElementById("displayPrice";
     for (var product in shoppingCart) {
      displayTitle.innerHTML = shoppingCart[product].title;
      displayPrice.innerHTML = shoppingCart[product].price;
     
     // title.createElement('div');
     // div.className = "itemTitle";
     // itemTitle = document.querySelectorAll(".itemTitle");
     // itemTitle.innerHTML = shoppingCart[product].title;
    
     } 
    }

    var book1 = document.getElementById("book1");
    book1.addEventListener("click", addToCart("Cracking the Coding Interview","$29.99"));

    <button class="addcart" id="book1" onclick="addToCart("Cracking the Coding Interview", "$29.99")"> Add to Cart </button>

    <div id="displayTitle"></div>
    <div id="displayPrice"></div>

Click the "Run code snippet" button or just look at your developer's console and see. — Scott Marcus, Mar 06 '18 at 21:13
I am not sure if you are aware of wrong quotes are used: `onclick="addToCart("Cracking the Coding Interview", "$29.99")">`; check this [Single vs Double quotes](https://stackoverflow.com/questions/2373074/single-vs-double-quotes-vs) — Sphinx, Mar 06 '18 at 21:19
Oh I changed the double quote to single quote and it works now! Thanks! — Shirley, Mar 06 '18 at 22:32

score 3 · Accepted Answer · answered Mar 06 '18 at 21:45

This is basic shopping cart in which you type title in text box and price(it will be number only,character is not allowed) and by clicking on button item will be added to cart.

var product=[];

function fun(){
  var x={};
  x.price=document.getElementById('price').value;
  x.title=document.getElementById('title').value;
  product.push(x);
    
  var iDiv = document.createElement('div');
  iDiv.id = product.length;
  iDiv.className = 'block';
  document.getElementsByTagName('body')[0].appendChild(iDiv);
  
  var para = document.createElement("span");
  var node = document.createTextNode('Title: ' + x.title+' |                    ');
  para.appendChild(node);

  var element = document.getElementById(product.length);
  element.appendChild(para);
  
  para = document.createElement("span");
  node = document.createTextNode('Price: '+ x.price);
  para.appendChild(node);
  
  element.appendChild(para);
}

Title:<input id="title" type="text">
Price:<input id="price" type="number">
<button onClick="fun()">Add to Cart </button>

<div>
<p><b>Cart Info</b></p>
</div>

It looks like you did not even attempt to fix the OP's code. Instead you just posted completely new code which is just an example of a cart which OP could find on many tutorials. — takendarkk, Mar 07 '18 at 15:12

how to make a shopping cart in javascript

1 Answers1

Linked

Related