I am in the process of developing a website that consists of different sections. The concept is simple - by clicking on a button located at the bottom of the page, it will reveal the corresponding div section.
For styling purposes, I have initially hidden all four sections and made only the "home" section visible:
.container-pages {
display: none;
}
#home-page {
display: block;
}
As for the HTML structure, it primarily includes the sections and associated buttons:
<!--sections-->
<div id="home-page" class="container-pages">
<h1>HOME</h1>
</div>
<div id="start-page" class="container-pages">
<h1>START</h1>
</div>
<div id="learn-page" class="container-pages">
<h1>LEARN</h1>
</div>
<div id="contact-page" class="container-pages">
<h1>CONTACT</h1>
</div>
<!--buttons-->
<div id="bottom-menu">
<div class="bottom-buttons bottom-menu-items" id="home-button">HOME</div>
<div class="bottom-buttons bottom-menu-items" id="start-button">START A PROJECT</div>
<div class="bottom-buttons bottom-menu-items" id="learn-button">LEARN</div>
<div class="bottom-buttons bottom-menu-items" id="contact-button">CONTACT US</div>
</div>
Next comes the JavaScript implementation:
// creating an array with the 4 html sections (pages):
const pages = [...document.getElementsByClassName('container-pages')];
// creating an array with the 4 html sections (pages):
const pages = [...document.getElementsByClassName('container-pages')];.container-pages {
display: none;
}
#home-page {
display: block;
}<!--sections-->
<div id="home-page" class="container-pages">
<h1>HOME</h1>
</div>
<div id="start-page" class="container-pages">
<h1>START</h1>
</div>
<div id="learn-page" class="container-pages">
<h1>LEARN</h1>
</div>
<div id="contact-page" class="container-pages">
<h1>CONTACT</h1>
</div>
<!--buttons-->
<div id="bottom-menu">
<div class="bottom-buttons bottom-menu-items" id="home-button">HOME</div>
<div class="bottom-buttons bottom-menu-items" id="start-button">START A PROJECT</div>
<div class="bottom-buttons bottom-menu-items" id="learn-button">LEARN</div>
<div class="bottom-buttons bottom-menu-items" id="contact-button">CONTACT US</div>
</div>Now, my challenge lies in filtering this array to create a new one containing only the <divs> that are currently displayed with the style attribute set to display: block;.
I attempted the following approach:
const currentSelection = pages.filter(div => div.style.display === 'block');
However, upon logging the currentSelection array to the console, it returns empty. Any insights or assistance on this matter would be greatly appreciated!
Thank you, Menmoe.