0

En este simulador de compras de productos, los objetos de la clase alfajor se van añadiendo al carrito a través del botón comprar (buy) al igual que el array se guarde en el localStorage. Sin embargo, no se obtuvo el mismo resultado al intentar guardar el mail y la contraseña de la clase usuario en el localStorage. Incluso los datos que se almacenan en el array "usuarios" tira un valor "undefined", por lo cual tampoco se pueden almacenar en el localStorage. No se si se debe al hecho de que se utilizan los type "mail" y "password" en el html.

//Creación de la clase Usuario. Parametros: id, mail y contraseña de los usuarios.
class Usuario{
    constructor(mail,contraseña){
        
        this.mail = mail;
        this.contraseña = contraseña;
    }
}

//Inicialización del array
const usuarios = [];



//Obtención del mail/nombre del usuario
let ingresoNombreUsuario = document.getElementById("exampleInputEmail1");
//guado el nombre de usuario en una variable.
ingresoNombreUsuario.onchange = () => {
    let entradaNombre = ingresoNombreUsuario.value;
    console.log(entradaNombre);
}
//obtención de la contraseña del usuario
let ingresarContraseñaUsuario = document.getElementById("exampleInputPassword1");
//guardo la contraseña en una variable.
ingresarContraseñaUsuario.onchange = () =>{
    let entradaContraseña = ingresarContraseñaUsuario.value;
    console.log(entradaContraseña);
}

//Añado la información de los usuarios a la arrayd "usuarios".
usuarios.push(new Usuario(ingresoNombreUsuario, ingresarContraseñaUsuario));

//Obtengo y almaceno mi formulario desde el DOM.
let formularioDeUsuarios = document.getElementById("registroUsuarios");

//Creo un evento a través de una función arrow.
formularioDeUsuarios.onsubmit = (event) => {
    //El event.preventDefault() evita que se refresque la página.
    event.preventDefault();
    //Se indica a la función flecha que debe bajar el ambito a lo local.
    //Que se quede con el evento de ese momento.
    event.target;
    
    const inputs = formularioDeUsuarios.children;
    usuarios.push(new Usuario(inputs[0].value,inputs[1].value));
    console.log(usuarios);
}



//-------------------------------------------------------------------------------------------------------------------------------------------------

//Creación de la clase alfajores. 
class Alfajor{
    constructor(idAlfajor,nombreAlfajor,precio){
        this.idAlfajor = parseInt(idAlfajor);
        this.nombreAlfajor = nombreAlfajor;
        this.precio = parseFloat(precio);
    }
}

//Inicialización del array donde se guardarán los objetos
const alfajores = [];

//Creación de los objetos + introducción de sus datos en el arrayd "alfajores";
alfajores.push(new Alfajor(1,"Alfajor de dulce de leche",30));
alfajores.push(new Alfajor(2,"Alfajor de mantequilla de maní",40));
alfajores.push(new Alfajor(3,"Alfajor de frutilla",30));
alfajores.push(new Alfajor(4,"Alfajor de chocolate blanco",35));

//Comprobación de que los objetos se encuentran dentro del array.
console.log(alfajores);


for(const alfajor of alfajores){
    let divAlfajor = document.createElement("div");
    //Crea los elementos div que contendran la información de los alfajores. 
    divAlfajor.innerHTML = `<h3>${alfajor.nombreAlfajor}</h3>
                            <h4>"Precio: "${alfajor.precio}</h4>
                            <button id="${alfajor.idAlfajor}" class = "btnCompra">Buy</button>`
    
                            //Agrega el hijo, en este caso el div, al cuerpo del HTML.
                            document.body.appendChild(divAlfajor);
}


//Obtención de los elementos de la clase btnCompra
let botones = document.getElementsByClassName("btnCompra");
//Comprobación de su obtención mediante el console.log.
console.log(botones);

//Creación de arrayd carritoCompras. Almacenará los productos seleccionados por el usuario.
const carritoCompras = [];

for(const boton of botones){
    //Se escuchará el evento "click" y saldrá por consola el id del alfajor seleccionado.
   boton.addEventListener("click",function(){
       let seleccion = alfajores.find(alfajor => alfajor.idAlfajor == this.id);
       //Saldia por consola del nombre del alfajor seleccionado.
       console.log("El alfajor seleccionado es: " + seleccion.nombreAlfajor + "y su precio es de: " + seleccion.precio);
       //Se agrega al arrayd "carritoCompras" el nombre del alfajor seleccionado. 
       carritoCompras.push(seleccion);
       //Guardo la información de carrito de compras en el localStorage.
       localStorage.setItem("alfajoresEnCarrito",JSON.stringify(carritoCompras));

       let consoleCarrito = JSON.parse(localStorage.getItem("alfajoresEnCarrito"));
       console.log(consoleCarrito);
   })
}

//Comprobación de los nombres guardados en el array.
console.log(carritoCompras);


<!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">
    <title>Alfajores TrendEM</title>
    <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/estilos.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bonheur+Royale&display=swap" rel="stylesheet">
</head>
<body>
    <header class="container-fluid ">
        <div class="row estiloHeader">
          <div class="col align-items-center justify-content-center">
            <h1 class="">Alfajores</h1>
            <h3 class="">Sweet and cheap</h3>
          </div>
        </div>
        <nav class="row navbar navbar-expand-lg navbar navbar-dark bg-dark">
            <div class="container-fluid">
              <a class="navbar-brand" href="#"><i class="bi bi-shop"></i></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/pages/aboutUs.html">About us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/pages/placesOfSale.html">Places of sale</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </header>
    <main>
        <form id="registroUsuarios" class="cajaFormulario">
          <h3>Register easily and get discounts on our products.</h3>
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
          </div>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary">Send</button>
        </form>
    </main>
    <script src="/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/main.js"></script>
</body>
</html>

1 respuesta 1

0

Estás teniendo problemas en el momento de crear el objeto usuario

usuarios.push(new Usuario(inputs[0].value,inputs[1].value));

Ya tienes inicializadas las variables un poco mas arriba, en lugar de nuevamente captar los inputs puedes usar esos valores ya declarados (pues igual son lo mismo), esa parte del codigo deberia quedar

usuarios.push(new Usuario(ingresoNombreUsuario.value, ingresarContraseñaUsuario.value));
1
  • No me funcionó tu respuesta @Davey-X. Incluso como el input y el mail que se ingresan por el prompt están almacenados en una variable, traté de hacerlo directamente con el nombre de la variable así: usuarios.push(new Usuario(entradaNombre, entradaContraseña)); y nada...probé de diferentes maneras y siempre me arroja "" o undefined como contenido de los inputs... no sé si incluso será que uso los type "password" e "email" en el código del index.html el 11 oct. 2021 a las 22:27

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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