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>