Javascript setInterval 함수의 else 문이 작동하지 않는 이유는 무엇입니까?

<button id="friends" class="btn btn-primary large3">Friends</button> 

setInterval(changeFriendBtnSize, 1000); 

    function changeFriendBtnSize() { 
    let upDown = 'up'; 
    if (document.getElementById('friends').getElementsByClassName('large3')) { 
     console.log('111'); 
     document.getElementById('friends').classList.remove('large3'); 
     document.getElementById('friends').classList.add('large4'); 
    } else if (document.getElementById('friends').getElementsByClassName('large4')) { 
     console.log('222'); 
     document.getElementById('friends').classList.remove('large4'); 
     document.getElementById('friends').classList.add('large3'); 
    } 
    }

내 콘솔 로그에 1 초 간격으로 111을 반복 기록하지만 222는 기록하지 않습니다. large3 클래스가 제거되고 large4가 추가되지만 다른 방법으로는 사용되지 않습니다. 이유는 무엇입니까?Javascript setInterval 함수의 else 문이 작동하지 않는 이유는 무엇입니까?

출처

2017-01-13 Simon Suh

이 때'document.getElementById를 ('친구'). getElementsByClassName ('large3')가'falsy 뭔가를 반환하지 쓸 데? 'getElementsByClassName'을 찾아보십시오. –

@ 토라자부로 getElementById는 충분히 빠르며별로 중요하지 않습니다. –

표현은

document.getElementById('friends').getElementsByClassName('large3')

항상 노드 목록을 반환합니다. 목록은 비어있을 수 있지만 여전히 개체 참조이므로 false으로 테스트하지 않습니다.

내가 알 수있는 한, .getElementsByClassName()은 어쨌든 찾고있는 API가 아닙니다. 코드에서 버튼이 현재 가지고있는 클래스를 확인하려고합니다. 그렇게, 당신은 classList.contains()로를 검사 할 것 :

if (document.getElementById('friends').classList.contains('large3'))

또는 무엇이든을.

출처

2017-01-13 14:31:21 Pointy

document.getElementById('friends').getElementsByClassName('large3')는 ID가 "친구"와 요소 내부 클래스 "large3"을 가진 요소를 발견 (항상 노드 목록을 반환), 예를 들면 다음 classList가 large3 포함 된 경우 수표를 찾고 있습니다

<div id="friends"><div class="large3"></div></div>

를 :

if (document.getElementById('friends').classList.contains("large3"))

및

에서

else if (document.getElementById('friends').classList.contains("large4"))

출처

2017-01-13 14:32:27 baao

당신의 당신이 친구들 안에있는 아이들을 찾고 있다면, 어떤 것이 .getElementsByClassName입니다. 대신 당신은 친구의 요소는 클래스 이름이 포함되어 있는지 확인해야합니다과 같이

document.getElementById('friends').classList.contains('large3')

출처

2017-01-13 14:32:45

당신은 classList.toggle()으로이 크게 단순화 할 수 있습니다.

어떤 이유

<button id="friends" class="btn btn-primary large3">Friends</button> 

setInterval(changeFriendBtnSize, 1000); 

function changeFriendBtnSize() { 
    var elt = document.getElementById('friends'); 

    elt.classList.toggle('large3'); 
    elt.classList.toggle('large4'); 
}

, 많은 사람들이, 특히 대신

elt.classList.toggle('cls', bool);

을 작성할 수 있습니다 두 번째 인수로, 매우 유용한 것으로 판명되는 classList.add 및 classList.remove 있지만 classList.toggle을 배웠습니다

if (bool) elt.classList.add('cls'); 
else elt.classList.remove('cls');

출처

2017-01-13 14:36:34

Javascript setInterval 함수의 else 문이 작동하지 않는 이유는 무엇입니까?

답변

관련 문제