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 © 2021. Todos los derechos reservados.</p>
</div>
<script src="main.js"></script>
</body>
</html>