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

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.