Upon clicking the button to add a new section, the section gets added successfully. However, the navbar does not get updated as expected. It should dynamically update the navbar to display both the existing sections and the new section added using JavaScript. I am unable to identify what is causing this issue. If you have a solution, please feel free to share.
let sections = document.querySelectorAll("section");
let navList = document.getElementById("navbar__list");
const buildSecBtn = document.getElementById("newSection");
const main = document.querySelector("main");
/**
* End Global Variables
* Start Helper Functions
*
*/
let counter = 3;
const buildSection = () => {
counter++
const newSec = ` <section id="section${counter}" data-nav="Section ${counter}">
<div class="landing__container">
<h2>Section ${counter}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lect...
main.insertAdjacentHTML("beforeend", newSec);
};
const buildNav = () => {
navList.innerHTML ="";
sections.forEach(section => {
const navItem = `<li><a class="menu__link" data-nav="${section.id}" href="${section.id}">${section.dataset.nav}</a></li>`
navList.insertAdjacentHTML("beforeend",navItem)
})
}
buildNav();
buildSecBtn.addEventListener("click", () => {
buildSection();
buildNav();
})body {
background: rgb(136,203,171);
background: linear-gradient(0deg, rgba(136,203,171,1) 0%, rgba(0,13,60,1) 100%);
margin: 0;
font-family: 'Merriweather', serif;
color: #fff;
}
/* Typeography General*/
h1 {
font-family: 'Fira Sans', sans-serif;
font-size: 3em;
margin: 2em 1rem;
}
@media only screen and (min-width: 35em){
h1 {
font-size: 7em;
margin: 2em 4rem 1em;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: 'Oxygen', Sans-Serif;
font-size: 3em;
color: #fff;
}
p {
line-height: 1.6em;
color: #eee;
}
/* ---- Layout Rules ---- */
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
section {
position: relative;
min-height: 80vh;
}
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: right;
}
.navbar__menu li {
display: inline-block;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navbar__menu .menu__link:hover {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
/* Header Styles */
.page__header {
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
#newSection {
background-color: black;
position: sticky;
width: 5rem;
color: wheat;
}
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p{
color: #fff;
}
/* ---- Theme Rules ---- */
/* Landing Container Styles */
.landing__container {
padding: 1em;
text-align: left;
}
@media only screen and (min-width: 35em){
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
margin-right: 0;
...
</html>