0

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&amp;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>
2
  • Debes hacer debug de tu código. El error indica que obj es null. Cuando estableces el valor de la variable obj, asegúrate que la misma realmente contiene datos. Puedes hacer un console.dir(obj) si deseas ver lo que tiene la variable obj antes de intentar usarla. Saludos Commented el 27 sept. 2021 a las 17:37
  • Ok @MauricioContreras, entiendo algo de lo que me decís y al realizar lo que me comentas, visualicé cada uno de los objetos pero no logré dar con la solución pues veo que la cantidad de cada uno existe... de hecho arriba en la función arraySet logré iterar de forma adecuada Commented el 27 sept. 2021 a las 18:58

1 respuesta 1

1

Tu error es que no estas ejecutando la función storage() en ningún momento, entonces no estas almacenando ningún dato en el sessionStorage.

Tu Respuesta

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

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