0

I am trying not to make the cart have duplicate items, instead I want the quantity to increase.

How can I compare the name in cart and the name that is about to be inputted from the product to the cart?

var total = document.getElementById('total');
var cart = document.getElementById("cart");
var totalPrice = 0;

function add(e) {
  var price = parseFloat(e.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.value);
  var quantity = parseFloat(e.previousSibling.previousSibling.value);
  var name = e.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.value;

  totalPrice += price * quantity;
  console.log("the name is " + name);

  cart.innerHTML += "<tr><td>" + name + "</td><td>" + quantity + "</td><td>" + price +
    "</td><td class='getT'>" + (price * quantity) +
    "</td><td class='btn btn-danger del'  id='del' onclick='del(this)'>Delete</td></tr>";

  total.innerHTML = "Total Price: " + totalPrice;
}
<div id="total">TOTAL</div>
<div id="cart"></div>

<h3>Blackberry</h3>
<input type="text" value="Blackberry" class="name" id="name" style="display: none;">
Price: 50,000
<input type="number" id="price" value="50000"><br />
Quantity <input type="number" id="quantity" min="1" max="50" value="1" s>
<button class="AddtoCart" onclick="add(this)">ADD TO CART</button>

<h3>Iphone 5</h3>
<input type="text" value="iphone 5" class="name" id="name" style="display: none;">
Price: 100,000
<input type="number" id="price" value="100000"><br />
Quantity <input type="number" id="quantity" min="1" max="50" value="1">
<button class="AddtoCart" onclick="add(this)">ADD TO CART</button>

<h3>Iphone 6</h3>
<input type="text" value="iphone 6" class="name" id="name" style="display: none;">
Price: 150,000
<input type="number" id="price" value="150000"><br />
Quantity <input type="number" id="quantity" min="1" max="50" value="1">
<button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
Peter B
  • 22,460
  • 5
  • 32
  • 69
Dprogrammed
  • 9
  • 3
  • Possible duplicate of [How do I check if an array includes an object in JavaScript?](https://stackoverflow.com/questions/237104/how-do-i-check-if-an-array-includes-an-object-in-javascript) – Julien Ambos Apr 04 '18 at 10:13
  • 1
    Just so you know, from a data-structure standpoint, it would be far more concise and accurate to use item IDs instead of names, as names can change, or be duplicated – Zachary Craig Apr 04 '18 at 11:04
  • Yes and also to complete what @zack6849 said, it's not a good strategy to use HTML as your data structure, HTML is use for presentation, your data should be an array of items – floverdevel Apr 04 '18 at 11:07

2 Answers2

1
var total = document.getElementById('total');

var cart = document.getElementById("cart");
var totalPrice = 0;
var productsCart={};
function add(e) {

    var price = parseFloat(e.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.value);
    var quantity = parseFloat(e.previousSibling.previousSibling.value);
    var name = e.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.value;

    totalPrice += price * quantity;
    console.log("the name is " + name);
    if(productsCart[name]==null){
        productsCart[name]={"name":name,"quantity":quantity,"price":price};
    }else{
        productsCart[name]={"name":name,"quantity":quantity+parseInt(productsCart[name].quantity),"price":price};
    }
    var inn="";
    for(var names in productsCart){
        inn+="<tr><td>"+productsCart[names].name+"--</td><td>"+productsCart[names].quantity+"--</td><td>"+productsCart[names].price+ "--</td><td class='getT'>" + (productsCart[names].price * productsCart[names].quantity) + "--</td><td class='btn btn-danger del'  id='del' onclick='del(this)'>Delete</td>-----</tr>";
    }
    cart.innerHTML =inn;
    total.innerHTML = "Total Price: " + totalPrice;
}

Html

<div id="total">TOTAL</div>
<div id="cart"></div>


<h3>Blackberry</h3>
<input type="text" value="Blackberry" class="name" id="name" style="display: none;">
Price: 50,000<input type="number" id="price" value="50000"><br>
Quantity <input type="number" id="quantity" min="1" max="50" value="1"s>
<button class="AddtoCart" onclick="add(this)">ADD TO CART</button>

<h3>Iphone 5</h3>
<input type="text" value="iphone 5" class="name" id="name" style="display: none;">
Price: 100,000<input type="number" id="price" value="100000"><br>
Quantity <input type="number" id="quantity" min="1" max="50" value="1">
<button class="AddtoCart" onclick="add(this)">ADD TO CART</button>

<h3>Iphone 6</h3>
<input type="text" value="iphone 6" class="name" id="name" style="display: none;"> Price: 150,000
<input type="number" id="price" value="150000"><br>
Quantity <input type="number" id="quantity" min="1" max="50" value="1">
<button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
Jasmin Mistry
  • 1,459
  • 1
  • 18
  • 23
Script Host
  • 911
  • 1
  • 11
  • 22
0

Here's a quick snippet: (small comment: avoid using a boilerplate code)

 var cart = document.getElementById("cart");
 var totalPrice = 0

//Those functions are implemented in JQuery - you can choose to implemented in the way you wish
function _getValueOfClosestInput(event,wrapperParent,elementType,className){
  return $(event).closest(wrapperParent).find(elementType +"."+className).val();
}

function _setTextfElement(elementClass,value){
  $(elementClass).text(value);
}

function add(e) {

     var price    = _getValueOfClosestInput(e,'div','input','price');
     var quantity = _getValueOfClosestInput(e,'div','input','quantity');
     var name     = _getValueOfClosestInput(e,'div','input','name');

        totalPrice += price * quantity;  
        console.log("the name is " + name);

     cart.innerHTML += "<tr><td>" + name + "</td><td>" + quantity + "</td><td>" + price +"</td><td class='getT'>" + (price * quantity) +"</td><td class='btn btn-danger del'  id='del' onclick='del(this)'>Delete</td></tr>"
   
   _setTextfElement('.total',totalPrice);
    
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>List of items purchased: <p>
<table id="cart">
</table> 

<div >Total Price: 
  <span class="total"></span>
</div>

 <div id="blackberry">
  <h3>Blackberry</h3>
                    <input type="text" value="Blackberry" class="name" id="name" style="display: none;">
                    Price: 50,000<input type="number" class="price" value="50000"><br>
                    Quantity <input type="number" class="quantity" min="1" max="50" value="1"s>
                    <button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
 </div>

 <div id="iphone5">
                     <h3>Iphone 5</h3>
                    <input type="text" value="iphone 5" class="name" id="name" style="display: none;">
                     Price: 100,000<input type="number" class="price" value="100000"><br> 
                    Quantity <input type="number" class="quantity" min="1" max="50" value="1">
                    <button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
 </div>

               
<div id="iphone6">
                     <h3>Iphone 6</h3>
                    <input type="text" value="iphone 6" class="name" id="name" style="display: none;"> Price: 150,000
                    <input type="number" class="price" value="150000"><br> 
                    Quantity <input type="number" class="quantity" min="1" max="50" value="1">
                    <button class="AddtoCart" onclick="add(this)">ADD TO CART</button>
 </div>
Rot-man
  • 18,045
  • 12
  • 118
  • 124