Javascript 更新forEach循环中的HTML元素集合_Javascript_Html_Arrays_Foreach_Listener

Javascript 更新forEach循环中的HTML元素集合

javascript html arrays

Javascript 更新forEach循环中的HTML元素集合,javascript,html,arrays,foreach,listener,Javascript,Html,Arrays,Foreach,Listener,我试图更新forEach循环中的HTML元素集合。因为在第3节之前，一切似乎都在运行，但每当我尝试添加新的部分时，问题就开始了，导航栏中的按钮在第4节及以上部分都不起作用这是我的HTML： <main id="main"> <header class="main__hero"> <nav> <ul class="flex-container&quo

我试图更新

forEach

循环中的HTML元素集合。因为在第3节之前，一切似乎都在运行，但每当我尝试添加新的部分时，问题就开始了，导航栏中的按钮在第4节及以上部分都不起作用

这是我的HTML：

    <main id="main">
      <header class="main__hero">
        <nav>
          <ul class="flex-container">
            <li>Section 1</li>
            <li>Section 2</li>
            <li>Section 3</li>
            <li id="new-section">NEW SECTION</li>
            <li id="back">BACK TO TOP</li>
          </ul>
        </nav>
        <h1>Landing Page</h1>
      </header>
      <section id="section1" data-nav="Section 1" class="your-active-class">
        <div class="landing__container">
          <h2>Section 1</h2>
          <p>
          </p>
          <p>
          </p>
        </div>
      </section>
      <section id="section2" data-nav="Section 2">
        <div class="landing__container">
          <h2>Section 2</h2>
          <p>
          </p>
          <p>
          </p>
        </div>
      </section>
      <section id="section3" data-nav="Section 3">
        <div class="landing__container">
          <h2>Section 3</h2>
          <p>
          </p>
          <p>
          </p>
        </div>
      </section>
    </main>

但是控制台中有一个奇怪的垃圾信息错误

Uncaught TypeError: Cannot read property 'scrollIntoView' of undefined
    at HTMLLIElement.<anonymous>

Uncaught TypeError:无法读取未定义的属性“scrollIntoView”
至少有一个元素。

有什么办法可以解决吗？

我相信，每当你添加一个新的部分时，你也必须连接点击事件。当脚本加载时，

forEach

块只运行一次，因此只“知道”前3个节列表项。

我认为，无论何时添加新节，都必须连接click事件。当脚本加载时，

forEach

块只运行一次，因此只“知道”前3个节列表项。

问题出在这一行：

allSections[index].scrollIntoView({ behavior: "smooth" });

由于您使用AllList（LI）索引访问所有节（section），因此您希望节数和LI数相同

我建议在以下

LI

元素中添加

ignore

类：

<li class="ignore" id="new-section">NEW SECTION</li>
<li class="ignore" id="back">BACK TO TOP</li>

注意：由于

allLists

循环现在处于

scroll

事件中，因此在用户调用之前它不会被初始化

var newSectionBtn=document.getElementById（“newSectionBtn”）；
让allSections=document.queryselectoral（“section”）；
让allLists=document.queryselectoral（“li:not（.ignore）”）；
设n=4；
//只要用户按下“添加新区段”按钮，此功能就会运行。
函数重复（num）{
const newSection=document.createElement（“节”）；
const newDiv=document.createElement（“div”）；
const heading=document.createElement（“h2”）；
常量p1=document.createElement（“p”）；
常量p2=document.createElement（“p”）；
newSection.appendChild（newDiv）；
新分部（标题）；
新分部附属分部（p1）；
新分部附属物（p2）；
setAttribute（“id”，“section”+num）；
setAttribute（“数据导航”、“节”+“”+num）；
newDiv.setAttribute（“类”、“着陆容器”）；
heading.textContent=“Section”+“”+num；
p1.textContent=
“新案文”；
p2.textContent=
“新案文”；
返回新闻节；
}
//将上述函数附加到主体。
newSectionBtn.addEventListener（“单击”，（）=>{
新闻节btn.insertAdjacentHTML（“beforebeagin”，“li>节”+“+n+””；
main.appendChild（重复（n））；
scrollIntoView（{behavior:“smooth”}）；
n++；
});
window.addEventListener（“滚动”，（）=>{
allLists.forEach（（列表，索引）=>{
list.addEventListener（“单击”，（）=>{
allSections[index].ScrollingToView（{behavior:“smooth”}）；
allSections=document.queryselectoral（“节”）；
allLists=document.querySelectorAll（“li:not（.ignore）”；
});
});
});
你好

第一节
第二节
第三节
新建章节
返回顶部

登录页
第一节




第二节




第三节