有没有一种方法可以将多个相同的对象添加到购物车？

Question

I'm programming a shopping cart of an online shop, and altough I already figured out most of it, when I add 2 of the same item the shopping cart shows it 2 times on the list instead of just one but doubling the price. Is there any way I can solve this without changing the majority of what I've already done?

 window.onload = function () { var baseDeDatos = [ { id: 1, nombre: 'Trim', precio: 1399, categoria: 'Buzo', img: 'img/1.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 2, nombre: 'Rainbow', precio: 990, categoria: 'Buzo', img: 'img/2.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 3, nombre: 'White', precio: 948, categoria: 'Buzo', img: 'img/3.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 4, nombre: 'Cycle', precio: 550, categoria: 'Buzo', img: 'img/4.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 5, nombre: 'Cellie', precio: 590, categoria: 'Buzo', img: 'img/5.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 6, nombre: 'Leo', precio: 2890, categoria: 'Buzo', img: 'img/6.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 7, nombre: 'Today', precio: 499, categoria: 'Buzo', img: 'img/7.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 8, nombre: 'Sky', precio: 499, categoria: 'Buzo', img: 'img/8.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 9, nombre: 'Regan', precio: 590, categoria: 'Buzo', img: 'img/9.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 10, nombre: 'Polly', precio: 1399, categoria: 'Remera', img: 'img/10.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 11, nombre: 'June', precio: 799, categoria: 'Remera', img: 'img/11.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 12, nombre: 'Amy', precio: 1299, categoria: 'Remera', img: 'img/12.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 13, nombre: 'Tai', precio: 648, categoria: 'Top', img: 'img/13.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 14, nombre: 'Judy', precio: 3290, categoria: 'Remera', img: 'img/14.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 15, nombre: 'Grey', precio: 1090, categoria: 'Top', img: 'img/15.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 16, nombre: 'Pinky', precio: 1090, categoria: 'Top', img: 'img/16.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 17, nombre: 'Line', precio: 1090, categoria: 'Top', img: 'img/17.jpg', descripcion: 'Buzo con diseño colorblock neon.' }, { id: 18, nombre: 'Line', precio: 1090, categoria: 'Buzo', img: 'img/18.jpg', descripcion: 'Buzo con diseño colorblock neon.' } ] var $items = document.querySelector('#items'); var carrito = []; var total = 0; var $carrito = document.querySelector('#carrito'); var $total = document.querySelector('#total'); function renderItems () { for (var info of baseDeDatos) { var miNodo = document.createElement('div'); miNodo.classList.add('card', 'col-md-6'); var miNodoCardBody = document.createElement('div'); miNodoCardBody.classList.add('card-body'); var miNodoTitle = document.createElement('h5'); miNodoTitle.classList.add('card-title'); miNodoTitle.textContent = info['nombre'] + ' / ' + info['categoria']; var miNodoImg = document.createElement('img'); miNodoImg.classList.add('card-text'); miNodoImg.src = info['img']; var miNodoDesc = document.createElement('p'); miNodoDesc.classList.add('card-text'); miNodoDesc.textContent = info['descripcion']; var miNodoPrecio = document.createElement('h5'); miNodoPrecio.classList.add('card-text'); miNodoPrecio.textContent = '$' +info['precio']; var miNodoBoton = document.createElement('button'); miNodoBoton.classList.add('btn', 'btn-primary'); miNodoBoton.textContent = 'Agregar al carrito'; miNodoBoton.setAttribute('marcador', info['id']); miNodoBoton.addEventListener('click', anyadirCarrito); miNodoCardBody.appendChild(miNodoImg); miNodoCardBody.appendChild(miNodoTitle); miNodoCardBody.appendChild(miNodoDesc); miNodoCardBody.appendChild(miNodoPrecio); miNodoCardBody.appendChild(miNodoBoton); miNodo.appendChild(miNodoCardBody); $items.appendChild(miNodo); } } function anyadirCarrito () { carrito.push(this.getAttribute('marcador')) calcularTotal(); renderizarCarrito(); } function renderizarCarrito () { $carrito.textContent = ''; carrito.forEach(function (item, indice) { var miItem = baseDeDatos.filter(function(itemBaseDatos) { return itemBaseDatos['id'] == item; }); var miNodo = document.createElement('li'); miNodo.classList.add('list-group-item', 'text-right'); miNodo.textContent = `${miItem[0]['nombre']} - $${miItem[0]['precio']}`; var miBoton = document.createElement('button'); miBoton.classList.add('btn', 'btn-danger', 'mx-5'); miBoton.textContent = 'X'; miBoton.setAttribute('posicion', indice); miBoton.addEventListener('click', borrarItemCarrito); miNodo.appendChild(miBoton); $carrito.appendChild(miNodo); }) } function borrarItemCarrito () { var posicion = this.getAttribute('posicion'); carrito.splice(posicion, 1); renderizarCarrito(); calcularTotal(); } function calcularTotal () { total = 0; for (var item of carrito) { var miItem = baseDeDatos.filter(function(itemBaseDatos) { return itemBaseDatos['id'] == item; }); total = total + miItem[0]['precio']; } var totalDosDecimales = total.toFixed(2); $total.textContent = totalDosDecimales; } renderItems(); } 

 @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700'); @import url("https://fonts.googleapis.com/css?family=Metal+Mania"); @font-face { font-family: "Booter - Zero Zero"; src: url("Fonts/Booter - Zero Zero.woff") format("woff"), url("Fonts/Booter - Zero Zero.woff2") format("woff2"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: Raleway; color: #777; } body{ background-color: #fffbed; } nav{ margin-bottom: 20px; } main{ text-align: center; } ul, li { text-decoration: none; list-style: none; } #logo { background: url(img/LOGO.png); width: 115px; height: 25px; font-size: 0; position: fixed; top: 24px; left: 20px; z-index: 1100; } .borrar:hover { background-color: #f8051b; opacity: 0.8; transition: 0.5s; } .enviar:hover { background-color: #009AAC; opacity: 0.8; transition: 0.5s; } .boton1{ background-color: #eb7681; } .boton2{ background-color: #78e5c3; } footer{ background-color: #f0ffff; background-size: cover; } .btn-primary { color: white; background-color: #f25656; border: none; border-radius: .3em; font-weight: bold; } .btn-primary:hover { background-color: #5f4141; } 

 <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Final Diseño y Programación Web</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="estilos.css"> <script src="java.js"></script> </head> <body> <header class="container fixed-top "> <h1 id="logo">Las Pepas</h1> <div class="row"> <nav class="col navbar fixed-top navbar-expand-md navbar-light bg-light "> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#barra" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="barra"> <ul class="navbar-nav text-center mx-auto px-1"> <li class="nav-item"> <a class="nav-link" href="#uno" data-ancla="true" data-tiempo="800" data-freno="60">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#dos" data-ancla="true" data-tiempo="800" data-freno="60">Productos</a> </li> <li class="nav-item"> <a class="nav-link" href="#tres" data-ancla="true" data-tiempo="800" data-freno="60">Contacto</a> </li> </ul> </div> </nav> </div> </header> <section id="dos"> <div class="container"> <div class="row"> <main id="items" class="col-sm-12 row pt-5 "></main> <aside class=" pl-5 pt-5"> <h2>Carrito</h2> <ul id="carrito" class="list-group"></ul> <hr> <p class="text-right">Total: <span id="total"></span>&dollar;</p> </aside> </div> </div> </section> <section id="tres" class="container"> <div class="row"> <div class="col-md-6 pb-3 my-auto mx-auto"> <h2 class="text-center">Seguinos en nuestras redes</h2> <div class="row pl-2 d-flex justify-content-center align-items-center mr-5"> <div class="col-2 pr-2"> <ul> <li> <a href="https://es-la.facebook.com/" target="_blank"> <img src="img/fb.png" alt="Facebook"> </a> </li> </ul> </div> <div class="col-2 pr-2"> <ul> <li> <a href="https://twitter.com/?lang=es/" target="_blank"> <img src="img/tw.png" alt="Twitter"> </a> </li> </ul> </div> <div class="col-2 pr-2"> <ul> <li> <a href="https://www.instagram.com/?hl=es-la" target="_blank"> <img src="img/ig.png" alt="Instagram"> </a> </li> </ul> </div> </div> </div> <div class=" col-md-6 col-11 text-md-left text-center ml-md-0 ml-4"> <aside class="col-lg-10"> <h3 class="text-center mt-5">¡Contactanos!</h3> <form action="enviar_formulario.php" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="nombre">Nombre</label> <input type="text" class="form-control bordes" id="nombre" placeholder="Nombre..." name="nombre"> </div> <div class="form-group"> <label for="mail">Email</label> <input type="email" class="form-control bordes" id="mail" placeholder="email..." name="mail"> </div> <div class="form-group"> <label for="comentario">Consulta</label> <textarea id="comentario" class="form-control bordes" cols="30" rows="5" name="comentario"></textarea> </div> <input type="reset" value="Borrar" class="btn boton1 borrar my-5"> <input type="submit" value="Enviar" class="btn boton2 enviar my-5"> </form> </aside> </div> </div> </section> <footer class="opacity p-3 text-center" > <p class="bold"> Diseño y Programación web - DMM3A - 2019</p> </footer> <script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.bundle.js"></script> <script src="js/animaScroll.js"></script> <script src="js/marcaBoton.js"></script> <script src="js/header02.js"></script> <script> $('.nav-item').on('click', function() { $(".navbar-collapse").collapse("hide"); }) </script> </body> </html> 

Answer 1

Try to check if item is already in the cart before adding it.

Before this line carrito.push(this.getAttribute('marcador')), check by ID if item is in carrito array, if yes follow your logic, if not - add function to increase item price to what you already have for that product (don't do just double, because it is possible, that you are adding the same item 3rd or 4th time).