Cannot read property "classList" of undefined

Question

I am trying to make a facebook clone and 'm facing a problem in see more button it shows the hidden items on first click but does not hide them on another click also on each click it gives the error "Uncaught TypeError: Cannot read property 'classList' of undefined"

My javascript code

function showHidden() {
            // i = 0;
            let items = document.getElementsByClassName("hidden");
            if (items[0].classList.contains("hidden")) {
                for (i = 0; items.length > 0; i++) {
                    items[i].classList.add("unhidden");
                }
            } else if (items[0].classList.contains("unhidden") && items[0].classList.contains("hidden")) {
                for (i = 0; items.length > 0; i++) {
                    items[i].classList.remove("unhidden");
                }
            }
        }

My HTML Code

MR. X
            Covid 19 Information
                        Center
            Friends
            Market Place
            
            Ads
            Watch
            Memories
            
            Groups
            Events
            
            
            
            
            
            
            
            See More

CSS :

#navbarHz {
    /* position: fixed; */
    top: 3rem;
    /* top: 0; */
    bottom:0;
    position:fixed;
    overflow-y:auto;
    overflow-x:hidden;
}

#navbarHz>ul {
    display: flex;
    width: 22vw;
    flex-direction: column;
    list-style: none;
    /* height: auto; */
    /* overflow-y: auto; */
}

#navbarHz>ul>li {
    padding: 10px;
    display: none;
    align-items: center;
    font-size: 18px;
}

#navbarHz>ul>li>i{
    /* width: 40px; */
    /* margin-left: 12px; */
    padding: 8px;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.1);
    display: block;
    /* margin-left: 12px; */
}

#navbarHz>ul>li>a {
    text-decoration: none;
    color: black;
}
#navbarHz>ul>li>img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
}

DecPK · Accepted Answer

Error is because of wrong logic in the for statement.

You have used

for (i = 0; items.length > 0; i++) {

This will result in an infinte loop

which will always true if items.length is not equal to 0. So when i > items.length then it will be undefined and getting classList on undefined will produce error.

for ( i = 0; i < items.length; i++ ) {

function showHidden() {
  // i = 0;
  let items = document.getElementsByClassName("hidden");
  if (items[0].classList.contains("hidden")) {
    for (i = 0; i < items.length; i++) {
      items[i].classList.add("unhidden");
    }
  } else if (items[0].classList.contains("unhidden") && items[0].classList.contains("hidden")) {
    for (i = 0; i < items.length; i++) {
      items[i].classList.remove("unhidden");
    }
  }
}

#navbarHz {
  /* position: fixed; */
  top: 3rem;
  /* top: 0; */
  bottom: 0;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbarHz>ul {
  display: flex;
  width: 22vw;
  flex-direction: column;
  list-style: none;
  /* height: auto; */
  /* overflow-y: auto; */
}

#navbarHz>ul>li {
  padding: 10px;
  display: none;
  align-items: center;
  font-size: 18px;
}

#navbarHz>ul>li>i {
  /* width: 40px; */
  /* margin-left: 12px; */
  padding: 8px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  /* margin-left: 12px; */
}

#navbarHz>ul>li>a {
  text-decoration: none;
  color: black;
}

#navbarHz>ul>li>img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

MR. X
Covid 19 Information Center
Friends
Market Place
Ads
Watch
Memories
Groups
Events







See More

------------EDITED-------------

function showHidden() {
  let items = document.querySelectorAll(".hidden");

  for (let i = 0; i < items.length; i++) {
    items[i].classList.remove("hidden");
  }
}

#navbarHz {
  /* position: fixed; */
  top: 3rem;
  /* top: 0; */
  bottom: 0;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbarHz>ul {
  display: flex;
  width: 22vw;
  flex-direction: column;
  list-style: none;
  /* height: auto; */
  /* overflow-y: auto; */
}

#navbarHz>ul>li {
  padding: 10px;
  display: none;
  align-items: center;
  font-size: 18px;
}

#navbarHz>ul>li>i {
  /* width: 40px; */
  /* margin-left: 12px; */
  padding: 8px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  /* margin-left: 12px; */
}

#navbarHz>ul>li>a {
  text-decoration: none;
  color: black;
}

#navbarHz>ul>li>img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.hidden {
  display: none;
}

.unhidden {
  display: block;
}


  MR. X
  Covid 19 Information Center
  Friends
  Market Place
  Ads
  Watch
  Memories
  Groups
  Events
  
  
  
  
  
  
  
  See More

Edited to toggle see more and hide

function showHidden() {
  let hidden = document.querySelectorAll(".hidden");
  let unHidden = document.querySelectorAll(".unhidden");
  let btn = document.querySelector(".see-more-btn").querySelector("a").firstElementChild;

  if (hidden.length > 0) {
    for (let i = 0; i < hidden.length; i++) {
      hidden[i].classList.remove("hidden");
      hidden[i].classList.add("unhidden");
      btn.textContent = "Hide"
    }
  } else if (unHidden.length > 0) {
    for (let i = 0; i < unHidden.length; i++) {
      unHidden[i].classList.remove("unhidden");
      unHidden[i].classList.add("hidden");
      btn.textContent = "See More"
    }
  }
}

#navbarHz {
  /* position: fixed; */
  top: 3rem;
  /* top: 0; */
  bottom: 0;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbarHz>ul {
  display: flex;
  width: 22vw;
  flex-direction: column;
  list-style: none;
  /* height: auto; */
  /* overflow-y: auto; */
}

#navbarHz>li {
  padding: 10px;
  align-items: center;
  list-style-type: none;
  font-size: 18px;
}

#navbarHz>ul>li>i {
  /* width: 40px; */
  /* margin-left: 12px; */
  padding: 8px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  /* margin-left: 12px; */
}

#navbarHz>ul>li>a {
  text-decoration: none;
  color: black;
}

#navbarHz>ul>li>img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.hidden {
  display: none;
}


  MR. X
  Covid 19 Information Center
  Friends
  Market Place
  Ads
  Watch
  Memories
  Groups
  Events
  
  
  
  
  
  
  
  
    
    
      See More

Cannot read property "classList" of undefined

Answers (1)

Related Questions

Cannot read property &quot;classList&quot; of undefined

Answers (1)

Related Questions

Cannot read property "classList" of undefined