0

Existe un error escuchando el evento datos y donde incluso no logro guardar en el localStorage lo introducido por el usuario en los inputs, pero no encuentro el error. Al probar el código aparece en la consola:

"Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at main.js:21"




//DOM
let usuario = document.getElementById("nombre")
console.log(usuario)

let menu = document.getElementsByClassName("contenedorMenu")
console.log(menu)

let buscar = document.getElementsByClassName("buscador")
console.log(buscar)

let redesSociales = document.getElementsByClassName("redes")
console.log(redesSociales)

let listaMenu = document.getElementsByTagName("ul")
console.log(listaMenu)


//EVENTO DATOS
boton1 = document.getElementById("cargarDatos")

boton1.addEventListener("click", function(){
    let nombre = document.getElementById("nombre").value
    console.log(nombre)
})

//LOCAL STORAGE

$(document).ready(function(){    
  $('#boton-guardar').click(function(){        
      /*Captura de datos escrito en los inputs*/        
      var nom = document.getElementById("nombretxt").value;
      var apel = document.getElementById("apellidotxt").value;
      /*Guardando los datos en el LocalStorage*/
      localStorage.setItem("Nombre", nom);
      localStorage.setItem("Apellido", apel);
      /*Limpiando los campos o inputs*/
      document.getElementById("nombretxt").value = "";
      document.getElementById("apellidotxt").value = "";
  });   
});

$(document).ready(function(){    
  $('#boton-cargar').click(function(){                       
      /*Obtener datos almacenados*/
      var nombre = localStorage.getItem("Nombre");
      var apellido = localStorage.getItem("Apellido");
      /*Mostrar datos almacenados*/      
      document.getElementById("nombre").innerHTML = nombre;
      document.getElementById("apellido").innerHTML = apellido; 
  });   
});

//STORAGE Y JSON

let nombreJSON = JSON.stringify(nombre);
console.log(nombreJSON);
localStorage.setItem('nombre', nombreJSON);


//ANIMACIONES
$("#h1").fadeOut("slow", () => {
    $("#h1").fadeIn(1000);
});

$("#h2").fadeOut("slow", () => {
    $("#h2").fadeIn(1000);
});

//FORMULARIO
const form = document.getElementById('form');

form.addEventListener('focusin', (event) => {
  event.target.style.background = 'violet';
});

form.addEventListener('focusout', (event) => {
  event.target.style.background = 'violet';
});



<!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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="./css/estilos.css">
    <title>Store</title>
</head>
<body>
    <div class="contenedorMenu">
        <div class="contenedorLogoInicio">
            <a href="index.html">
            <img src="imagenes/logo.png" width="80px" height="80px" margin="15px">
            </a>
        </div>
        <nav class="menu">
            <ul>
                <li class="botonMenu">
                    <a href="index.html">Inicio</a>
                </li>
                <li class="botonMenu">
                    <a href="paginas/productos.html">Productos</a>
                        <ul>
                            <li><a href="paginas/productos.html#remeraCorta">Remera m/corta</a></li>
                            <li><a href="paginas/productos.html#remeraLarga">Remera m/larga</a></li>
                            <li><a href="paginas/productos.html#musculosaBlusa">Musculosa/blusa</a></li>
                            <li><a href="paginas/productos.html#tops">Tops</a></li>
                            <li><a href="paginas/productos.html#niños">Niños</a></li>
                        </ul> 
                </li>
                <li class="botonMenu">
                    <a href="paginas/contacto.html">Contacto</a>
                </li>
                <li class="botonMenu">
                    <a href="paginas/comoComprar.html">¿Cómo comprar?</a>
                </li>
                <li class="botonMenu"> 
                    <a href="paginas/cambios.html">Cambios</a>
                </li>
            </ul>
        </nav>
        <nav class="buscador">
            <input type="text" placeholder="Nombre" id="nombretxt">
            <input type="text" placeholder="Apellido" id="apellidotxt">
            <button id="boton-guardar">Guardar</button><br>
            <label type="text" id="nombre"></label><br>   
            <label type="text" id="apellido"></label><br>
            <button id="boton-cargar"></button>
        </nav>
    </div>
    <section class="bloque">
        <div class="categoriasPrincipales">
            <h1 id="h1">CATEGORÍAS PRINCIPALES</h1>
            <nav class="menuCategorias">
                <ul>
                    <li class="menuC"><a href="paginas/productos.html#remeraCorta#remeraLarga">Remeras Unisex</a></li>
                    <li class="menuC"><a href="paginas/productos.html#buzos#camperas">Buzos y Camperas</a></li>
                    <li class="menuC"><a href="paginas/productos.html#remerones">Remerones</a></li>
                    <li class="menuC"><a href="paginas/productos.html#niños">Niños</a></li>
                    <li class="menuC"><a href="paginas/productos.html#bodysBebe">Bodys bebes</a></li>
                    <li class="menuC"><a href="paginas/productos.html#pijamas">Pijamas Adultos/Niños</a></li>
                </ul> 
            </nav>    
        </div>
        <div class="catalogo">
            <h2 id="h2">NUESTRO CATÁLOGO</h2>
        </div>
    </section>
    <footer >
    </footer>
    <div class="copy">
        <p> Copyright &copy; 2021. Todos los derechos reservados.</p>   
        </div>
    <script src="main.js"></script>
</body>
</html>
1
  • ¿Cuál es el HTML con el que trabaja este código? Considera aportar siempre un Ejemplo Mínimo y Verificable.
    – A. Cedano
    el 4 oct. 2021 a las 10:05

1 respuesta 1

0

No tienes ningún elemento form, por lo tanto, al ejecutar:

  const form = document.getElementById('form');

el valor de form es nulo despues de ejecutar esa instrucción y en consecuencia:

form.addEventListener('focusin', (event) => {
  event.target.style.background = 'violet';
});

form.addEventListener('focusout', (event) => {
  event.target.style.background = 'violet';
});

estas tratando de agregar un event listener a un elemento nulo. Ese es la causa de tu problema. Agrega la etiqueta o elemento form a tu archivo.

Nota: Este error invalida todo lo demas.

Tu Respuesta

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

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