I’m trying to make a code to open a playlist when your mouse hover a first container, which open the playlist, but I have 4 of them and my code is not working when I try to use forEach and addEventListener.
Here’s my HTML code :
<section>
<ul class="albums-caroussel">
<li class="album-caroussel">
<div class="card">
<h2 class="card-title">Elements</h2>
<button class="playlist-button">
<img class="image-albums" src="Site/Elements.png">
</button>
<div class="card-content">
<p>Released in June 27th 2024</p>
</div>
<div class="album-playlist hide">
<section>
<ul class="album-songs">
<li>
<button>
<img src="Site/Elements.png">
<h3>Elements</h3>
</button>
</li>
<li>
<button>
<img src="Site/Elements.png">
<h3>Elements of Light</h3>
</button>
</li>
<li>
<button>
<img src="Site/Elements.png">
<h3>Elements of Hope</h3>
</button>
</li>
<li>
<button>
<img src="Site/Elements.png">
<h3>Elements of Love</h3>
</button>
</li>
<li>
<button>
<img src="Site/Elements.png">
<h3>Elements of Life</h3>
</button>
</li>
</ul>
</section>
</div>
</div>
</li>
<li class="album-caroussel">
<div class="card">
<h2 class="card-title">Nocturn Thoughts</h2>
<button class="playlist-button">
<img class="image-albums" src="Site/Nocturn Thoughts.png">
</button>
<div class="card-content">
<p>Released in December 1st 2023</p>
</div>
<div class="album-playlist hide">
<section>
<ul class="album-songs">
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>The House in the <br>Field</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>Gravitational Wave</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>New Beggining</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>Night Train</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>Happier</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>Projet Lunaire</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>Monster</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>Nocturn Thoughts</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>The Flare</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>New Wave</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>Running by the <br>Stars</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nocturn Thoughts.png">
<h3>Falling</h3>
</button>
</li>
</ul>
</section>
</div>
</div>
</li>
<li class="album-caroussel">
<div class="card">
<h2 class="card-title">Nouveau Départ</h2>
<button class="playlist-button">
<img class="image-albums" src="Site/Nouveau Départ.png">
</button>
<div class="card-content">
<p>Released in August 30th 2023</p>
</div>
<section>
<div class="album-playlist hide">
<ul class="album-songs">
<li>
<button>
<img src="Site/Nouveau Départ.png">
<h3>Décollage</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nouveau Départ.png">
<h3>Respiration <br>Profonde</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nouveau Départ.png">
<h3>Souvenirs</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nouveau Départ.png">
<h3>Vol 873 <br>pour Toronto</h3>
</button>
</li>
<li>
<button>
<img src="Site/Nouveau Départ.png">
<h3>Atterrissage</h3>
</button>
</li>
</ul>
</div>
</section>
</div>
</li>
<li class="album-caroussel">
<div class="card">
<h2 class="card-title">Feelings</h2>
<button class="playlist-button">
<img class="image-albums" src="Site/Feelings.png">
</button>
<div class="card-content">
<p>Released in March 13th 2023</p>
</div>
<section>
<div class="album-playlist hide">
<ul class="album-songs">
<li>
<button>
<img src="Site/Feelings.png">
<h3>Regrets (Intro)</h3>
</button>
</li>
<li>
<button>
<img src="Site/Feelings.png">
<h3>Remember</h3>
</button>
</li>
<li>
<button>
<img src="Site/Feelings.png">
<h3>I Need You</h3>
</button>
</li>
<li>
<button>
<img src="Site/Feelings.png">
<h3>Feelings</h3>
</button>
</li>
<li>
<button>
<img src="Site/Feelings.png">
<h3>Let me be with <br>You</h3>
</button>
</li>
</ul>
</div>
</section>
</div>
</li>
</section>
<script src="js/album.js"></script>
Here’s my Java code :
const openPlaylist = document.querySelectorAll(".playlist-button")
const albumPlaylist = document.querySelectorAll(".album-playlist")
openPlaylist.forEach(function (i) {
openPlaylist.addEventListener('mouseenter', openPlaylistContainer);
})
albumPlaylist.forEach(function (i) {
albumPlaylist.addEventListener('mouseleave', closePlaylistContainer);
});
function openPlaylistContainer() {
albumPlaylist.classList.remove("hide");
}
function closePlaylistContainer() {
albumPlaylist.classList.add("hide");
}
I tried to use forEach but i really don’t understand how it works and i’m stuck with this part of m code.
If someone can help me, that would be amazing.
New contributor
Lankbark is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1