Al probar este código, enseguida sale un error por consola donde Javascript me dice que:
Uncaught TypeError: Cannot read properties of null (reading 'cantidad') at start
En la línea 136 pero no encuentro donde está el fallo. Entiendo que se produce en la última función del código, function start, cuando se itera el array con el for y se intentan recuperar los id de las etiquetas li en el archivo index.html pero no logro saber porqué sale el error apenas pruebo el código...
class Producto {
constructor() {
}
}
let btn = document.getElementById("confirm");
btn.addEventListener("click", confirm);
inListener();
start();
/* -----------------FUNCIONES-----------------*/
function arraySet() {
const prods = [];
for (let i = 0; i < 5; i++) {
let price = document.getElementById("pr" + i).innerHTML;
let num = price.split("$");
prods[i] = new Producto();
prods[i].id = i;
prods[i].cantidad = document.getElementById("a" + i).value;
prods[i].nombre = document.getElementById(i).innerHTML;
prods[i].precio = parseInt(num[1]);
}
return prods;
}
function priceSet() {
let amnts = document.getElementsByClassName("amnt");
let price = 0;
for (let i = 0; i < amnts.length; i++) {
let p = document.getElementById("pr" + i).innerHTML.split("$")[1];
price += (amnts[i].value * p);
}
price += (price * 0.05);
return price;
}
function dataValid() {
let nombre = document.getElementById("name").value;
let apellido = document.getElementById("surname").value;
let pais = document.getElementById("country").value;
let direccion = document.getElementById("address").value;
let error = document.createElement("section");
error.innerHTML = `<p style="color: red;">Por favor completar todos los campos.</p>`;
if (nombre == "") {
document.body.appendChild(error);
} else if (apellido == "") {
document.body.appendChild(error);
} else if (pais == "") {
document.body.appendChild(error);
} else if (direccion == "") {
document.body.appendChild(error);
} else {
return true;
}
}
function confirm() {
let final = document.createElement("div");
let data = dataValid();
let precio = priceSet();
if ((data == true) && (precio > 0)) {
let nombre = document.getElementById("name").value;
let apellido = document.getElementById("surname").value;
let pais = document.getElementById("country").value;
let direccion = document.getElementById("address").value;
final.innerHTML = `<h4>Nombre completo: ${nombre} ${apellido}</h4>
<h4>País: ${pais}</h4>
<h4>Dirección completa: ${direccion}</h4>
<h4>Precio final: $${precio}</h4>
<h4 style="font-weight: bold;">Compra realizada con éxtito</h4>`;
document.body.appendChild(final);
}
}
function inListener() {
let ul = document.getElementById("prods");
ul.addEventListener("focusout", storage);
}
function storage(e) {
const prods = arraySet();
for (let i = 0; i < prods.length; i++) {
sessionStorage.setItem(prods[i].id, JSON.stringify(prods[i]));
}
}
function start() {
const prods = arraySet();
for (let i = 0; i < prods.length; i++) {
let obj = JSON.parse(sessionStorage.getItem(i));
document.getElementById("a" + i).value = obj.cantidad;
}
sessionStorage.clear();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="2do.entregable.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap"
rel="stylesheet">
<title></title>
</head>
<body>
<h1>Indumentaria TopMEN</h1>
<ul class="cards" id="prods">
<li>
<img src="imgs/pic0.jpg">
<p id="0">Zapatillas Adidas Way</p>
<p id="pr0">Precio: $200</p>
<input type="number" class="amnt" id="a0">
</li>
<li>
<img src="imgs/pic1.jpg">
<p id="1">Botines Air Wave</p>
<p id="pr1">Precio: $360</p>
<input type="number" class="amnt" id="a1">
</li>
<li>
<img src="imgs/pic2.jpg">
<p id="2">Gorra Pinleft</p>
<p id="pr2">Precio: $75</p>
<input type="number" class="amnt" id="a2">
</li>
<li>
<img src="imgs/pic3.jpg">
<p id="3">Zapatillas Remington</p>
<p id="pr3">Precio: $6000</p>
<input type="number" class="amnt" id="a3">
</li>
<li>
<img src="imgs/pic4.jpg">
<p id="4">Gorra Stussy</p>
<p id="pr4">Precio: $30</p>
<input type="number" class="amnt" id="a4">
</li>
</ul>
<h3>Completar datos</h3>
<form action="" id="info">
<div class="form">
<label for="name">Nombre</label>
<input type="text" class="input" id="name" aria-describedby="emailHelp">
</div>
<div class="form">
<label for="surname">Apellido</label>
<input type="text" class="input" id="surname" aria-describedby="emailHelp">
</div>
<div class="form">
<label for="country">País</label>
<input type="text" class="input" id="country">
</div>
<div class="form">
<label for="address">Dirección completa</label>
<input type="text" class="input" id="address">
</div>
</form>
<div>
<button class ="btn transition" id="confirm">Confirmar compra</button>
</div>
<script src="main.js"></script>
</body>
</html>
obj
esnull
. Cuando estableces el valor de la variableobj
, asegúrate que la misma realmente contiene datos. Puedes hacer unconsole.dir(obj)
si deseas ver lo que tiene la variableobj
antes de intentar usarla. Saludos