자바 스크립트가 부분적으로 만 작동합니다.

Question

클릭 후 두 개의 li 항목에 대한 클래스를 제거하고 다른 li 항목에 클래스를 추가하는 스크립트를 만들고 싶습니다. .className 메서드를 사용했지만 부분적으로 만 작동합니다. 내가 한 번 리 항목을 클릭 한 후, 리 항목의 하나가 사라지고 난 오류가

function changeClass(){ 
    var elements = document.getElementsByClassName('tbh'); 
    for (var i = 0, len = elements.length; i <=len; i++) { 
     elements[i].className='hidden'; 

     console.log('aaa'); 
    } 
} 

:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="tbh lista"> 
      <a href="#"><img src="images/facebook.png"></a> 
     </li> 
     <li class="tbh lista"> 
      <a href="#"><img src="images/mail.png"></a> 
     </li> 
     <li class="lista"> 
      <a href="#" onclick="changeClass()" id="phone"><img  src="images/phone.png"></a> 
     </li> 
     <li class="lista hidden"> 
      <p>text</p> 
     </li> 
    </ul> 
</div> 

이

는 스크립트입니다. 제대로 작동하려면 두 번 클릭해야합니다. 오류를 찾을 수 없습니다. 다음은 console.log에 표시됩니다. aaa Uncaught TypeError: Cannot set property 'className' of undefined

Answer 1

이것은 document.getElementsByClassName이 HTMLCollection을 반환하지만 Array는 반환하지 않기 때문입니다. 그래서

var elements = Array.from(document.getElementsByClassName('tbh'));