I can't create a dynamic navigation menu using pure JavaScript

Question

I tried to create a dynamic navigational menu using pure JavaScript but the code doesn't work.

I created an empty unordered list that will be filled automatically using JavaScript

// Identify container, sections and empty unorder list.
const menu = document.getElementById("menu");
const sections = [...document.querySelectorAll("section")]


const nav_menu_items = () => {
  let nav_menu_container = '';

  sections.foreach(section => {

    const sectionID = section.id;
    const sectionAtrribute = section.dataset.nav;
    nav_menu_container += `<li> <a class="menu_item_link" href="#${sectionID}">${sectionAtrribut}</a></li>`
  })
  menu.innerHTML = nav_menu_container;
}
nav_menu_items();

<body>
  <header>
    <nav>
      <ul id="menu"></ul>
    </nav>
  </header>
  <section id="container" class="container" data-section="big">
    <div id="section1" class="section" data-nav="section1">This is section 1 so hello</div>
    <div id="section2" class="section" data-nav="section2">This is section 2 so hello</div>
    <div id="section3" class="section" data-nav="section3">This is section 3 so hello</div>
    <div id="section4" class="section" data-nav="section4">This is section 4 so hello</div>
  </section>

</body>

sections.foreach( should be sections.forEach( - note the uppercase E — Professor Abronsius
– Professor Abronsius, Commented Mar 21, 2021 at 16:37

Lakshya Thakur · Accepted Answer · 2021-03-21 16:38:31Z

Corrected three things here :-

[...document.querySelectorAll("section")] should be [...document.querySelectorAll(".section")] because section is a class and you need to prefix a class with . when passing in querySelector/querySelectorAll.
It's forEach and not foreach.
sectionAtrribut should be sectionAtrribute

<body>
    <header>
        <nav>
            <ul id="menu"></ul>
        </nav>
    </header>
    <section id="container" class="container" data-section="big">
        <div id="section1" class="section" data-nav="section1">This is section 1 so hello</div>
        <div id="section2" class="section" data-nav="section2">This is section 2 so hello</div>
        <div id="section3" class="section" data-nav="section3">This is section 3 so hello</div>
        <div id="section4" class="section" data-nav="section4">This is section 4 so hello</div>
       </section>
       <script>
           // Identify container, sections and empty unorder list.
       const menu = document.getElementById("menu");
       const sections = [...document.querySelectorAll(".section")]
       

      const nav_menu_items = () => {
           let nav_menu_container = '';

        sections.forEach(section => {

              const sectionID = section.id;
              const sectionAtrribute = section.dataset.nav;
              nav_menu_container += `<li> <a class="menu_item_link" href="#${sectionID}">${sectionAtrribute}</a></li>`   
            })
        menu.innerHTML=nav_menu_container;
        }
        nav_menu_items();
        </script>
</body>

Collectives™ on Stack Overflow

I can't create a dynamic navigation menu using pure JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related