1

estoy tratando de hacer que al presionar comprar n veces en el 1er producto se multiplique con el precio del mismo , y que al ir a la pagina 2 (q me muestra lo que compre hasta el momento) me cambie el valor de la cantidad y del total,en el total me tira NaN y la cantidad queda en 0, por el momento hice esto:

$(document).ready(function() {
    

     let contador = localStorage.getItem("contadorCarrito") || 0;
     let cantidadp1 = localStorage.getItem("cantp1") || 0;


     $(".reset-carrito").click(function(){

        $(".contador").text(0);
        localStorage.removeItem("contadorCarrito");
    })


    $(".comprar").click(function(){

      $(".contador").text(contador);

       localStorage.setItem("contadorCarrito", contador++);

    }) 

    $(".contador").text(localStorage.getItem("contadorCarrito"));

    
    


    $(".prod1").click(function(){


         localStorage.setItem("cantp1" , cantidadp1++);
         $(".cantp1").text(cantidadp1);
         localStorage.setItem("precio1",$(".precio-p1"));


    })


     $(".total-p1").text(  localStorage.getItem("precio1") * localStorage.getItem("cantp1") );


})
*{
    margin: 0;
    padding: 0;
}

header {
    background: #000;
    margin-bottom: 50px;
}


.agregar{

    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
    display: inline-block;

}

ul li a{
    
    text-decoration: none;
    text-align: center;
    margin-right: 100px;
    margin-left: 200px;
}

a{
    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
}

nav ul li{
    display: inline-block;
}


nav{
    background: #000;
    padding: 5px;
}

.carrito{
    margin-left: 558px;
}

.carrito , .contador{
    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
    display: inline-block;
}

.reset-carrito{

    color: #f00;
    cursor: pointer;
    

}





.productos{

    display: flex;
    flex-direction: row;
    background: #000;
    margin-top: 20px;
    justify-content: center;
    padding: 10px;
    width: 500px;
    margin: auto;
    text-align: center;
}

.productos >div{

    background: #78288C;
    padding: 10px;
    border: 1px solid #fff;
    width: 200px;
    color: #fff;
}

.comprar{

    background: #000;
    color: #fff;
    padding: 2px;
    width: 100px;
    border: 0;
    outline: 0;
    font-weight: bold;
}

.comprar:hover{

    background: #fff;
    color: #000;

}


.resumen-compra{

    display: grid;
    grid-template-columns: repeat(4 , 100px);
    grid-template-rows:  repeat(4 , 20px);
    border: 2px solid black;
    padding: 0px; 
    width: 400px;
    height: 100px;
    grid-gap: 0px;
    text-align: center;
    margin: auto;

}

.fila1{
    font-weight: bold;

}

.resumen-compra>input , .resumen-compra>div{

    border: 1px solid black;
    text-align: center;
    background: #78208C;
    font-family: sans-serif;
    color: #fff;

}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/pages.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/carrito.js"></script>
</head>
<body>
 <header>
    <nav>
        <ul>
            <li><a href="page1.html">PAGE1</a></li>
            <li><a href="page2.html">PAGE2</a></li>
            <li><a href="page3.html">PAGE3</a></li>
        </ul>
    </nav>

    <div class="carrito">carrito <p class="contador">0<p><span class="reset-carrito">X</span></div>
</header>
<br><br>
<section class="productos">

   <div>
    <p class="precio1">100</p>
    <input type="submit" value="comprar" class="comprar prod1">
   </div>

  <div>
    <p class="precio2">300</p>
    <input type="submit" value="comprar" class="comprar prod2">
  </div>

  <div>
    <p class="precio3">500</p>
    <input type="submit"value="comprar" class="comprar prod3">
  </div>
 
  <div>
    <p class="precio4">800</p>
    <input type="submit" value="comprar" class="comprar prod4">
  </div>

</section>

 </body>
</html>
<!--page2-->
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/carrito.js"></script>
    <link rel="stylesheet" type="text/css" href="css/pages.css">
</head>
<body>

<header>
    <nav>
        <ul>
            <li><a href="page1.html">PAGE1</a></li>
            <li><a href="page2.html">PAGE2</a></li>
            <li><a href="page3.html">PAGE3</a></li>
        </ul>
    </nav>

    <div class="carrito">carrito <p class="contador">0<p></div>
</header>

<div class="resumen-compra">

    <div class="fila1">PRODUCTO</div>
    <div class="fila1">CANTIDAD</div>
    <div class="fila1">PRECIO</div>
    <div class="fila1">TOTAL</div>

    <div>producto1</div>
    <input type="number" min="0" max="10" class="cantp1" value="0">
    <div class="precio-p1">100</div>
    <div class="total-p1"></div>

    <div>producto2</div>
    <input type="number" min="0" max="10" class="cantp2" value="0">
    <div class="precio-p2">300</div>
    <div class="total-p2"></div>

    <div>producto3</div>
    <input type="number" min="0" max="10" class="cantp3" value="0">
    <div class="precio-p3">500</div>
    <div class="total-p3"></div>

    <div>producto4</div>
    <input type="number" min="0" max="10" class="cantp4" value="0">
    <div class="precio-p4">800</div>
    <div class="total-p4"></div>

</div>

</body>
</html>

0

1 respuesta 1

1

Estás obteniendo mal el valor del precio de este elemento:

<p class="precio1">100</p>

En esta línea de tu código JS:

localStorage.setItem("precio1",$(".precio-p1"));

Primeramente, la clase del elemento es precio1, luego, en el código jQuery tienes que usar text() para obtener el valor 100, pues en tu selector actual estás seleccionando todo el elemento que tendría la clase, no su contenido.

Debería corregirse haciendo esto:

localStorage.setItem("precio1",$(".precio1").text());

Recomendación

Debo decir que usar clases para obtener valores no es seguro, las clases tienen un uso más orientado a agrupar elementos que deberían tener el mismo comportamiento, formato CSS, etc, significa que una misma clase puede indicarse en más de un elemento y eso sería problemático para tu caso. Sería mejor asignar un id (que debe ser único) y obtener el valor con el selector de id (#), algo así:

HTML:

<p id="precio1">100</p>

JS:

localStorage.setItem("precio1",$("#precio1").text());

Por ejemplo, dado que los precios están dentro de una clase comprar, tú podrías escuchar los clicks de todos los productos (imagina que hay mil productos o más) con un bloque como este:

$(".comprar").click(function(){
    //Trabajar con cualquier elemento dentro de un contenedor
    //con la clase comprar, usando this para referirse al elemento
    //que fue clickeado
}

En lugar de tener mil bloques que harían lo mismo:

$(".prod1").click(function(){

$(".prod2").click(function(){

$(".prod9999").click(function(){

$(".prod99999999").click(function(){
     //uffff

Ejemplo

Aquí hay un ejemplo muy simple en el cual, desde un mismo bloque basado en la clase comprar se escuchan los clicks de todos los botones Comprar así, no tienes que replicar los eventos .click para todos.

$(".comprar").click(function() {
  console.log(`Seleccionaste el producto con precio: ${$(this).prev("p").text()}`);
  console.log('Aquí puedes agrupar todas las operaciones de los productos, escuchando todos los clicks que ocurran en los botonos comprar');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="productos">

  <div>
    <p class="precio1">100</p>
    <input type="submit" value="comprar" class="comprar prod1">
  </div>

  <div>
    <p class="precio2">300</p>
    <input type="submit" value="comprar" class="comprar prod2">
  </div>

  <div>
    <p class="precio3">500</p>
    <input type="submit" value="comprar" class="comprar prod3">
  </div>

  <div>
    <p class="precio4">800</p>
    <input type="submit" value="comprar" class="comprar prod4">
  </div>

</section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.