CODEWITHSUNDEEP
javascripthtml
Dprogrammed
Dprogrammed

Reputation: 9

how can i compare the name and name in cart

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>

Upvotes: 0

Views: 87

Answers (2)

Script Host
Script Host

Reputation: 921

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>

Upvotes: 1

Rotem jackoby
Rotem jackoby

Reputation: 22198

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>

Upvotes: 0

Related Questions