我无法使用纯 JavaScript 创建动态导航菜单答案

【问题标题】：I can't create a dynamic navigation menu using pure JavaScript我无法使用纯 JavaScript 创建动态导航菜单
【发布时间】：2021-03-22 10:40:20
【问题描述】：

我尝试使用纯 JavaScript 创建动态导航菜单，但代码不起作用。

我创建了一个空的无序列表，它将使用 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( 应该是 sections.forEach( - 注意大写 E

标签： javascript html css web

【解决方案1】：

在这里更正了三件事：-

[...document.querySelectorAll("section")] 应该是 [...document.querySelectorAll(".section")] 因为section 是一个类，在传入querySelector/querySelectorAll 时需要在类前面加上.。
这是forEach 而不是foreach。
sectionAtrribut 应该是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>

【讨论】：