Javascript console error when adding classList.add to array

Question

Hi trying to understand and fix the console error I'm getting when running the following code full code here

for(var i = 0 ; i <= paragraphs.length ; i++){
  if( i === 0 ){
    continue
  }
  paragraphs[i].classList.add('hide')
}

The error reads

Cannot read property 'classList' of undefined

I found this explanation on reddit but I was not sure how it had been fixed?

Many thanks in advance

In JavaScript arrays (and array-like objects) are zero-indexed: the first element of an array is at index 0, and the last element is at the index equal to the value of the array's length property minus 1. (ref.) — hindmost
– hindmost, Commented Feb 17, 2017 at 8:41

Thibault Bach · Accepted Answer · 2017-02-17 08:50:52Z

2

You are out of your array on your loop.

Do this :

for(var i = 0 ; i < paragraphs.length ; i++)

Instead of

for(var i = 0 ; i <= paragraphs.length ; i++)

You can optimized your loop to begin on the second item directly ("i = 1 instead of "i =0")

edited Feb 17, 2017 at 8:50

answered Feb 17, 2017 at 8:40

Thibault Bach

5565 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hajji Tarik · Accepted Answer · 2017-02-17 08:44:08Z

2

Your loop exceeds the number of your paragraphs to solve it you must:

1 - paragraphs.length-1

or

2 - i < paragraphs.length

var paragraphs = document.getElementsByTagName('p'),
    firstParagraph = paragraphs[0],
    link = document.createElement('a');
    link.innerHTML = 'Show more';
    link.setAttribute('class' , 'link');
    link.setAttribute('href' , '#');
    firstParagraph.appendChild(link);
        for(var i = 0 ; i <= paragraphs.length-1 ; i++){
          if( i === 0 ){
            continue
          }
          console.log("hellp",paragraphs[i]);
          paragraphs[i].classList.add('hide')
        }

edited Feb 17, 2017 at 8:44

answered Feb 17, 2017 at 8:37

Hajji Tarik

1,0827 silver badges23 bronze badges

Collectives™ on Stack Overflow

Javascript console error when adding classList.add to array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related