Estoy haciendo una tarea que me pusieron, necesito con Javascript que muestre el <div class="container-info info-bike container-info-day no-show">
y que el svg
haga display:none;
a través de una clase CSS que cree llamada no-show
al hacer hover en el div, cosa que logró exitosamente si dejo afuera la función ocultarHobby()
, el problema viene cuando empiezo a trabajar en esa función para volver a ocultar el div, en vez de hacerlo tiene un comportamiento muy extraño:
Al hacer hover al div aparece y desaparece muy rápido con el contenido del div completo (imagen y letras), después al volver a mostrarse por el evento en el mismo div que se muestra solo se ve la imagen, y a la tercera pues se muestra básicamente vacío, quedando solo el header arriba, además, en la consola me marca este error:
Uncaught TypeError: Cannot read properties of null (reading 'classList') at HTMLElement.ocultarHobby (script.js:30:37)
Esta es la función que esta dando problemas:
function ocultarHobby(e) {
e.stopPropagation();
e.target.previousElementSibling.classList.remove("no-show");
e.target.classList.add("no-show");
e.target.parentElement.add("border");
}
Con e.target.previousElementSibling.classList.remove("no-show");
intento hacer referencia al SVG que esta dentro del article antes del div para quitarle la clase CSS no-show y que se vuelva a ver, y pasarle esta clase al div para que desaparezca, la última línea de la función pues simplemente intenta añadir el borde de vuelta al elemento padre del div. La función cargar()
es solo para una pequeña animación que puse para simular la carga al entrar a la página, pero igual pongo el código completo por sí tiene algo que ver.
//Selectores
const bodySelector = document.querySelector("body");
const spinner = document.querySelector("#spinner");
//const test = document.querySelector(".hobbies.music");
const bike = document.querySelector(".bike");
const bikeHobby = bike.children[1];
const development = document.querySelector(".development");
const gaming = document.querySelector(".gaming");
const swim = document.querySelector(".swim");
const watch = document.querySelector(".watch");
const music = document.querySelector(".music");
console.log(bikeHobby.previousElementSibling);
//console.log(test.children[1]);
//Eventos
document.addEventListener("DOMContentLoaded", cargar);
bike.addEventListener("mouseenter", mostrarHobby);
bike.addEventListener("mouseout", ocultarHobby);
//Funciones
function mostrarHobby(e) {
e.target.children[1].previousElementSibling.classList.add("no-show");
e.target.classList.remove("border");
e.target.children[1].classList.remove("no-show");
}
function ocultarHobby(e) {
e.stopPropagation();
e.target.previousElementSibling.classList.remove("no-show");
e.target.classList.add("no-show");
e.target.parentElement.add("border");
}
function cargar(e) {
bodySelector.classList.add("hide");
const hobbies = document.querySelector(".container");
hobbies.classList.add("no-show");
setTimeout(() => {
hobbies.classList.remove("no-show");
bodySelector.classList.remove("hide");
spinner.style.transition = "2s";
spinner.classList.add("hidden");
}, 3000);
}
* {
font-size: 10px;
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
font-family: "Zen Dots", sans-serif;
}
.blur {
filter: blur(30px);
overflow: hidden;
}
.header {
display: flex;
justify-content: space-between;
padding: 2rem 4rem;
background-color: rgb(236, 82, 43);
}
footer {
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(236, 82, 43);
}
footer h4 {
font-size: 2rem;
}
.header-title h3 {
font-size: 2.5rem;
}
.hobbies-title {
margin-top: 5rem;
text-align: center;
margin-bottom: 5rem;
}
main {
padding: 5rem 2.5rem;
width: 100%;
max-width: 100vw;
}
h1 {
font-size: 5rem;
}
.container {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.hobbies {
flex-grow: 1;
height: 34rem;
width: 30rem;
max-width: 40rem;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-direction: column;
}
.container-info {
height: 68rem;
transform: translateY(-20%);
border-radius: 1rem;
display: flex;
flex-direction: column;
gap: 2rem;
box-shadow: 0rem 2rem 4rem 0rem;
}
.p-container {
padding: 2rem;
}
.image {
display: block;
width: 75%;
margin-top: 3rem;
margin: auto;
border-radius: 2.5rem;
}
.p {
font-size: 2rem;
}
.card-header-day {
background: linear-gradient(rgb(248, 80, 2), rgb(240, 45, 45));
}
.card-header-night {
background: linear-gradient(rgb(7, 147, 202), rgb(55, 3, 240));
}
.card-header {
height: 10%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.card-header p {
font-size: 2rem;
font-weight: 500;
}
.container-info-day {
border: solid 2px rgb(224, 27, 27);
background-color: rgb(255, 255, 255);
}
.container-info-night {
border: solid 2px rgb(46, 98, 241);
background-color: rgb(32, 32, 32);
}
.p-day {
font-size: 2.5rem;
color: #000;
}
.border {
border: solid 2px rgb(182, 181, 181);
}
.p-night {
font-size: 2.5rem;
color: rgb(250, 249, 249);
}
.day {
background-color: rgba(255, 255, 255, 0.726);
}
.no-show {
display: none;
}
.center {
margin: 0 auto;
}
#spinner {
background: blur(30px);
width: 100%;
height: 100%;
}
.hide {
overflow: hidden;
}
<!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>Mis hobbies</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="spinner.css" />
<link rel="stylesheet" href="javascript.css" />
<link rel="stylesheet" href="general.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=Inter:wght@400;500;700&family=Oswald:wght@200;300;400;500&family=Padyakke+Expanded+One&family=Roboto:ital,wght@0,500;0,700;1,400;1,500&family=Rubik:wght@400;500;700&family=Solitreo&family=Zen+Dots&display=swap"
rel="stylesheet"
/>
</head>
<body class="day" id="my-body">
<div id="spinner" class="spinner"></div>
<header class="header">
<div class="header-title"><h3>Tarea I</h3></div>
<div class="mode">
<!--SUN-->
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-sun"
viewBox="0 0 16 16"
>
<path
d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
/>
</svg>
<!--MOON-->
<svg
xmlns="http://www.w3.org/2000/svg"
width="50"
height="50"
fill="#000000"
viewBox="0 0 256 256"
class="no-show"
>
<rect width="256" height="256" fill="none"></rect>
<path
d="M216.7,152.6A91.9,91.9,0,0,1,103.4,39.3h0A92,92,0,1,0,216.7,152.6Z"
fill="none"
stroke="#000000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></path>
</svg>
</div>
</header>
<main>
<div class="hobbies-title"><h1>Mis hobbies</h1></div>
<section class="container">
<article class="hobbies bike border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="192"
height="160"
fill="currentColor"
class="bi bi-bicycle bike-hobby"
viewBox="0 0 16 16"
>
<path
d="M4 4.5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 1 0 1v.5h4.14l.386-1.158A.5.5 0 0 1 11 4h1a.5.5 0 0 1 0 1h-.64l-.311.935.807 1.29a3 3 0 1 1-.848.53l-.508-.812-2.076 3.322A.5.5 0 0 1 8 10.5H5.959a3 3 0 1 1-1.815-3.274L5 5.856V5h-.5a.5.5 0 0 1-.5-.5zm1.5 2.443-.508.814c.5.444.85 1.054.967 1.743h1.139L5.5 6.943zM8 9.057 9.598 6.5H6.402L8 9.057zM4.937 9.5a1.997 1.997 0 0 0-.487-.877l-.548.877h1.035zM3.603 8.092A2 2 0 1 0 4.937 10.5H3a.5.5 0 0 1-.424-.765l1.027-1.643zm7.947.53a2 2 0 1 0 .848-.53l1.026 1.643a.5.5 0 1 1-.848.53L11.55 8.623z"
/>
</svg>
<div
class="container-info info-bike container-info-day no-show"
>
<header class="card-header card-header-day">
<p>Montar bicicleta</p>
</header>
<img
src="images/bike.jpg"
alt="Bike riding"
class="image bike-img"
/>
<div class="p-container">
<p class="p p-day">
Entre mis hobbies esta el montar bicicleta,
especialmente en lugares despejados y tranquilos
como parques o montes, me gusta sentir el viento
en mi cara.
</p>
</div>
</div>
</article>
<article class="hobbies development border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="192"
height="192"
fill="#000000"
viewBox="0 0 256 256"
>
<rect width="256" height="256" fill="none"></rect>
<rect
x="32"
y="48"
width="192"
height="160"
rx="8"
fill="none"
stroke="#000000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></rect>
<circle cx="68" cy="84" r="12"></circle>
<circle cx="108" cy="84" r="12"></circle>
</svg>
<div
class="container-info info-development container-info-day no-show"
>
<header class="card-header card-header-day">
<p>Programar</p>
</header>
<img
src="images/development.jpg"
alt="Software development"
class="image development-img"
/>
<div class="p-container">
<p class="p p-day">
Me gusta desarrollar aplicaciones web y aprender
todo lo que tenga que ver con ello,
especialmente el desarrollo web frontend
</p>
</div>
</div>
</article>
<article class="hobbies gaming border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="192"
height="160"
fill="currentColor"
class="bi bi-controller"
viewBox="0 0 16 16"
>
<path
d="M11.5 6.027a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1v-1z"
/>
<path
d="M3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .62.39c.655-.079 1.35-.117 2.043-.117.72 0 1.443.041 2.12.126a.5.5 0 0 1 .622-.399l1.932.518a.5.5 0 0 1 .306.729c.14.09.266.19.373.297.408.408.78 1.05 1.095 1.772.32.733.599 1.591.805 2.466.206.875.34 1.78.364 2.606.024.816-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773-.245-.232-.496-.526-.739-.808-.126-.148-.25-.292-.368-.423-.728-.804-1.597-1.527-3.224-1.527-1.627 0-2.496.723-3.224 1.527-.119.131-.242.275-.368.423-.243.282-.494.575-.739.808-.398.38-.877.706-1.513.773a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772a2.34 2.34 0 0 1 .433-.335.504.504 0 0 1-.028-.079zm2.036.412c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a13.748 13.748 0 0 0-.748 2.295 12.351 12.351 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.504C4.861 9.969 5.978 9.027 8 9.027s3.139.942 3.965 1.855c.164.181.307.348.44.504.214.251.403.472.615.674.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.354 12.354 0 0 0-.339-2.406 13.753 13.753 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27-1.036 0-2.063.091-2.913.27z"
/>
</svg>
<div
class="container-info info-gaming container-info-day no-show"
>
<header class="card-header card-header-day">
<p>Videojuegos</p>
</header>
<img
src="images/gaming.jpg"
alt="Gaming"
class="image gaming-img"
/>
<div class="p-container">
<p class="p p-day">
Soy un gran fan de los videojuegos online,
especialmente de consola o PC, son un gran hobby
en mis tiempos libres para entretenerme y hacer
amistades.
</p>
</div>
</div>
</article>
<article class="hobbies swim border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="192"
height="160"
fill="currentColor"
class="bi bi-water"
viewBox="0 0 16 16"
>
<path
d="M.036 3.314a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.314 3.964a.5.5 0 0 1-.278-.65zm0 3a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.314 6.964a.5.5 0 0 1-.278-.65zm0 3a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.314 9.964a.5.5 0 0 1-.278-.65zm0 3a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.757-.703a.5.5 0 0 1-.278-.65z"
/>
</svg>
<div
class="container-info info-swim container-info-day no-show"
>
<header class="card-header card-header-day">
<p>Nadar</p>
</header>
<img
src="images/swim.jpg"
alt="Swimming"
class="image swim-img"
/>
<div class="p-container">
<p class="p p-day">
La natación es uno de mis deportes preferidos,
siempre que tengo la oportunidad nado en playas
o piscinas, aunque hare todo lo posible para
prácticarlo como deporte regularmente algún día!
</p>
</div>
</div>
</article>
<article class="hobbies watch border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="192"
height="160"
fill="currentColor"
class="bi bi-tv-fill"
viewBox="0 0 16 16"
>
<path
d="M2.5 13.5A.5.5 0 0 1 3 13h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zM2 2h12s2 0 2 2v6s0 2-2 2H2s-2 0-2-2V4s0-2 2-2z"
/>
</svg>
<div
class="container-info info-watch container-info-day no-show"
>
<header class="card-header card-header-day">
<p>Ver series y documentales</p>
</header>
<img
src="images/watch.jpg"
alt="Watching series"
class="image watch-img"
/>
<div class="p-container">
<p class="p p-day">
Encuentro muy entretenido el ver series y
documentales (especialmente), suelen ser
generalmente históricos, militares o de
supervivencia, aunque ocasionalmente también veo
series de anime japonesas.
</p>
</div>
</div>
</article>
<article class="hobbies music border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="192"
height="160"
fill="currentColor"
class="bi bi-music-note-beamed"
viewBox="0 0 16 16"
>
<path
d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"
/>
<path
fill-rule="evenodd"
d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"
/>
<path
d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"
/>
</svg>
<div
class="container-info info-music container-info-day no-show"
>
<header class="card-header card-header-day">
<p class="p-day">Escuchar música</p>
</header>
<img
src="images/music.jpg"
alt="Listening music"
class="image music-img"
/>
<div class="p-container">
<p class="p day">
Uno de mis hobbies más frecuentes es escuchar
musica en mi bocina o celular dependiendo la
hora, especialmente bachata y en menor medida,
pop.
</p>
</div>
</div>
</article>
</section>
</main>
<footer>
<h4>
This is a bootcamp´s practice made by Adrian Polanco Ferrer
© 2023
</h4>
</footer>
<script src="script.js"></script>
</body>
</html>
display: none
efectivamente quita el elemento del documento, con lo cual a la siguiente vez que intentes interactuar con él... no está! Esundefined
y eso es el error que te está dando. Prueba a cambiar eldisplay: none
porvisibility: hidden
, que simplemente lo oculta visiblemente pero permanece en el documento.