为什么我的Javascript setInterval函数中的else语句不起作用？

Question

<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');
    }
  }

在我的控制台日志中,它每秒一遍又一遍地记录111但从不记录222.类large3被删除而large4被添加但是从来没有反过来,为什么呢？

Answer 1

表达方式

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

始终返回节点列表.该列表可能为空,但它仍然是一个对象引用,永远不会测试为false.

据我所知,.getElementsByClassName()不是你正在寻找的API.您的代码显然想要检查按钮当前具有哪个类; 要做到这一点,你要检查的classList有.contains():

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

管他呢.