Я создаю список навигации, который заполняется динамически всякий раз, когда на страницу добавляется новый элемент раздела. Сначала я создал пустой массив, целью которого является непрерывное получение содержимого, добавляемого на страницу, путем применения к нему цикла forLoop.

Вот код javascript

    var list= document.getElementById('navbar__list'); 

let myArray= []; //Create an empty array
for( let i=0; i<=myArray.length; i++){
  var triggerSection= document.getElementById('section'+(1+i)); //Call section elements one by one with id=section(1+i)
  myArray.push(triggerSection); //push elements to create an array that includes all sections on the page
  var sectionName= myArray[i].getAttribute('data-nav'); //Call data-nav value for each item
  const newItem= document.createElement('Li'); //create li elemnt inside the document object
  newItem.textContent= sectionName; //pass the data-nav value as a text to the li element
  newItem.setAttribute('id','item'+(1+i));
  list.appendChild(newItem); //pass the li element to the  unordered list
}

HTML-код

<ul id="navbar__list">


      </ul>

<section id="section1" data-nav="Section 1" class="your-active-class">
<section id="section2" data-nav="Section 2">
<section id="section3" data-nav="Section 3">

Проблема в том, что при установке конечного условия цикла for, как показано выше, он добавляет дополнительный элемент в конец массива со значением (null), и консоль генерирует эту ошибку «Uncaught TypeError: Cannot read property 'getAttribute' нулевого "

И при удалении знака равенства, чтобы сделать конечное условие следующим образом (i

-2
Eman Hassan 10 Дек 2020 в 15:37

1 ответ

Лучший ответ

Вы не должны перебирать массив при добавлении или удалении элементов в нем. Это вообще рискованная вещь, потому что это зависит от языков программирования, и это также трудно понять. В этом случае лучше использовать цикл while или do-while .

Если вы хотите остаться в цикле for, вы можете просто добавить условие прерывания.

for ( let i = 0; i < myArray.length; i++){
    let triggerSection= document.getElementById( 'section' + ( 1 + i ));
    if ( triggerSection === null ) break;
    ...
}

Вместо этого лучшим условием завершения цикла может быть triggerSection === null, потому что getElementById возвращает null, если элемент не найден. (https://developer.mozilla.org/en-US / docs / Web / API / Document / getElementById)

Поэтому это должно работать:

let i = 0;
while ( (let triggerSection = document.getElementById( 'section' + ( 1 + i ))) !== null) {


    i++;
}
0
nilosch 10 Дек 2020 в 14:13