Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] E-commerce

por Hernán Darío Calvo Cornelio
| 80.4k xp | 32 posts

Tengo este codigo de html que se repite en dos index.html lo que cambia es que en uno tiene un form de inicio de secsion y el principal no.

<li class="contenedor_usuario">
                            <span class="usuario">Nombre</span>
                            <ul class="usuario__registrado-seccion">
                                <li class="usuario_contenedor-seccion">
                                    <a class="usuario-link" href="#">Perfil</a>
                                </li>
                                <li class="usuario_contenedor-seccion">
                                    <a class="usuario-link" href="#">Compras</a>
                                </li>
                                <li class="usuario_contenedor-seccion">
                                    <a class="usuario-link" href="#">Salir</a>
                                </li>
                            </ul>
                        </li>

y tengo este codigo js para ambos. 

//Usuario ingresar
    const usuarioRegistrado = document.querySelector(".contenedor_usuario");
    usuarioRegistrado.style.display = "none";
  
    // validacion de datos
    if(loginForm) {
        loginForm.addEventListener("submit", (event) => {
            event.preventDefault();
            const nombre = nombreInput.value;
            if (emailInput.checkValidity() && passwordInput.checkValidity() && nombre.length > 0) {
                window.location.href = "index.html";
                usuarioRegistrado.style.display = "block";
                const nombreUsuario = document.querySelector(".usuario").textContent = nombre;
      
            } else {
                alert("Ingresa todos los campos correctamente")
            }
        });
    }
  
    // Campo de e-mail
    if(emailInput) {
        emailInput.addEventListener("input", () => {
            const email = emailInput.value;
            const validEmail = /^[^\s@]+@[^\s@]+\.(com|es)$/i.test(email);
      
            if (validEmail) {
                emailInput.setCustomValidity("");
                emailInput.style.border = "2px solid green"
            } else {
                emailInput.setCustomValidity("El e-mail debe llevar @ y (.com o .es)")
                emailInput.style.border = "2px solid red"
            }
        });
    }
  
    // Campo de contraseña
    if(passwordInput) {
        passwordInput.addEventListener('input', () => {
            const password = passwordInput.value;
      
            const hasUpperCase = /[A-Z]/.test(password);
            const hasNumber = /\d/.test(password);
            const hasLetterAndNumbers = /^[a-zA-Z0-9]+$/.test(password);
      
            if (hasUpperCase && hasNumber && hasLetterAndNumbers) {
                passwordInput.setCustomValidity("");
                passwordInput.style.border = "2px solid green"
            } else {
                passwordInput.setCustomValidity("La contraseña tiene que contener (minusculas, mayusculas, numeros) maximo 15 caracteres")
                passwordInput.style.border = "2px solid red"
            }
        });
    }
  }
  
  // Llama a la función init cuando se haya cargado completamente el DOM
  document.addEventListener("DOMContentLoaded", init);

lo que necesito es que cuando de click al evento de form me aparesca el contenedor del li en el archivo principal una vez que me redirija a este, en el index donde esta el form funciona cuando hago el evento pero cuando lo redirigo a otro index.html no me aparece el li es lo que necesito

1 respuesta
por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Hernán!

Gracias por compartir tu duda con nosotros. Según entiendo, tienes dos archivos index.html que contienen un código HTML similar, pero uno de ellos tiene un formulario de inicio de sesión y el otro no. Además, tienes un código JavaScript que se aplica a ambos archivos.

Si entendí correctamente, deseas que cuando hagas clic en el formulario de inicio de sesión, aparezca el contenedor <li> en el archivo principal (index.html), pero cuando te redirijas a otro index.html, el contenedor no aparezca.

Una posible solución para esto es utilizar el almacenamiento local del navegador para guardar un valor que indique si el formulario de inicio de sesión ha sido enviado. Luego, en el archivo principal (index.html), puedes verificar ese valor y mostrar u ocultar el contenedor <li> en consecuencia.

Aquí hay un ejemplo de cómo podrías hacerlo:

// Usuario ingresar
const usuarioRegistrado = document.querySelector(".contenedor_usuario");
usuarioRegistrado.style.display = "none";

// Verificar si el formulario ha sido enviado
const formularioEnviado = localStorage.getItem("formularioEnviado");
if (formularioEnviado) {
  usuarioRegistrado.style.display = "block";
}

// Validación de datos
if (loginForm) {
  loginForm.addEventListener("submit", (event) => {
    event.preventDefault();
    const nombre = nombreInput.value;
    if (emailInput.checkValidity() && passwordInput.checkValidity() && nombre.length > 0) {
      localStorage.setItem("formularioEnviado", "true");
      window.location.href = "index.html";
    } else {
      alert("Ingresa todos los campos correctamente");
    }
  });
}

En este ejemplo, utilizamos localStorage.setItem() para guardar el valor "true" cuando el formulario se envía correctamente. Luego, en el archivo principal (index.html), verificamos si ese valor existe en el almacenamiento local utilizando localStorage.getItem() y mostramos u ocultamos el contenedor <li> en consecuencia.

Espero que esta solución te sea útil. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Buena suerte con tu proyecto!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)