не удается сделать ссылки активными при прокрутке до указанного c раздела на странице

Question

Я выполняю функцию целевой страницы с чистым javascript и не могу использовать какие-либо библиотеки. Я хочу сделать ссылку на прокрутку к указанному c разделу, чтобы быть активной поэтому я сделал вспомогательную функцию IsInViewPort () для определения положения при прокрутке страницы. Я пытаюсь сделать функцию, которая находится на прокрутке, зацикливание внутри разделов на странице, чтобы добавить указанный раздел в classList и сделать его ссылку из navbar активной. Когда я добавил эту функцию, произошла ошибка: «Неожиданный идентификатор» и панель навигации исчезла. как это исправить? глобальные переменные:

const sections = document.getElementsByTagName('section');
const addToNav = document.querySelector('ul');
const myLinks = document.getElementById("navbar__list");

вспомогательная функция:

    const isInViewport = elem => {
  let distance = elem.getBoundingClientRect();
  return (
    distance.top >= 0 &&
    distance.left >= 0 &&
    distance.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    distance.right <=
      (window.innerWidth || document.documentElement.clientWidth)
  );
};

функция:

window.addEventListener("scroll" , e=>{
  for(let i=0 ; i<sections.length;i++){
    if(isInViewport(sections[i])){
      sections[i].classList.add("your-active-class");
      var activateLink = document.getElementsByClassName(''+[i]+'')[0];
      activateLink.classList.add("active");
    }
    else{
      sections[i].classList.remove("your-active-class");
      var activateLink = document.getElementsByClassName(''+[i]+'')[0];
      activateLink.classList.remove("active");
    }
  }
});

Пока это мой проект: https://jsfiddle.net/dode2/yqne0orj/1/ моя проблема в // Установить разделы как активные

Я очень ценю вашу помощь.

Answer 1

«Неожиданный идентификатор» вызван вашим «int i = 0», которому следует присвоить i = 0

Следующий код:

window.addEventListener("scroll" , e=>{
for(int i=0 ; i<=sections.length;i++){
    if(isInViewport(sections[i])){
        sections[i].classList.add("your-active-class");
        document.getElementsByClassName(`${sections[i].id}`)[0].classList.add("active");
    }
    else{
        section.classList.remove("your-active-class");
        document.getElementsByClassName(`${sections[i].id}`)[0].classList.remove("active");
    }
}

Должно быть:

window.addEventListener("scroll" , e=>{
for(let i=0 ; i<=sections.length;i++){
    if(isInViewport(sections[i])){
        sections[i].classList.add("your-active-class");
        document.getElementsByClassName(`${sections[i].id}`)[0].classList.add("active");
    }
    else{
        section.classList.remove("your-active-class");
        document.getElementsByClassName(`${sections[i].id}`)[0].classList.remove("active");
    }
}

Это исправит вашу ошибку.