Не работает несколько раз classList add/remove

Question

есть код блоков меню

html

 <div class="menu-select">
                <ul class="menu">
                    <li><button class="direction">ВСЕ <div class="plane"><img src="images/plane.png"></div></button></li>
                    <li><button class="direction">Вторичная<div class="plane"><img src="images/plane.png"></div></button></li>
                    <li><button class="direction">Загородная<div class="plane"><img src="images/plane.png"></div> <div class=container-number><span class="span"></span><span class=text>10</span></div></button></li>
                    <li><button class="direction">Новостройки<div class="plane"><img src="images/plane.png"></div></button></li>
                     <li><button class="direction">Аренда<div class="plane"><img src="images/plane.png"></div> <div class=container-number><span class="span"></span><span class=text>6</span></div></button>
                         <li><button class="direction-rent rent">Снять<div class="plane"><img src="images/plane.png"></div></button></li>
                          <li><button class="direction-rent">Сдать<div class="plane"><img src="images/plane.png"></div> <div class=container-number><span class="span"></span><span class=text>6</span></div></button></li> 
                          <li><button class="direction-rent rent3">Кастомное <div class="plane"><img src="images/plane.png"></div><div class=container-number><span class="span"></span><span class=text>10</span></div></button></li>  
                          <li class="direction-botton botton-rent" id="direction-botton"><button class="custom-button" id="custom-button">+</button></li>         
                     </li>
                    <li><button class="direction ipoteka">Ипотека<div class="plane"><img src="images/plane.png"></div></button></li>
                    <li><button class="direction">Коммерческая<div class="plane"><img src="images/plane.png"></div></button></li>
                    <li><button class="direction">Межрегиональные<div class="plane"><img src="images/plane.png"></div></button></li>
                    <li><button class="direction">HR<div class="plane"><img src="images/plane.png"></div></button></li>
                    <li><button class="direction">Прочее<div class="plane"><img src="images/plane.png"></div></button></li>
                   </ul>
            </div>

css

   .active-direction {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
    color: #0F6BFF;
    background: #F5FAFF;
    border-radius: 6px;
    width: 100%;
    height: 36px;
    display: inline-flex;
    align-items: center;
    border: none;
    margin-bottom: 13px;
    padding-left: 12px;
   }


.direction {
    margin-bottom: 13px;
    padding-left: 12px;
    border: none;
    background: none;
    color: #667085;
    height: 36px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 25px;
    display: flex;
}

.plane {
    margin-left: 100px;
    display: none;
}

.plane-active {
    margin-left: 100px;
    display: unset;
}
.container-number {
    display: inline-block;
    position: relative;
  }
  
  .span {
    display: inline-block;
    background:#F2F4F7;
    color: #344054;
    text-align: center;
    border-radius: 39%;
    padding: 37% 0;
    width: 100%;
    position: absolute;
    transform: translateY(-50%);
    margin-top: 10px;
    margin-left: 8px;
  }
  
  .text {
    position: relative;
    top: -2.5px;
    padding: 0em 0.65em;
    left: 8px;
  }

js

let menu = document.getElementsByClassName('menu');
let direction = document.getElementsByClassName('direction');
for (i = 0; direction.length > i; i++) {
  direction[i].onclick = function() {
    if (this.classList.contains ('direction')){
      this.classList.remove('direction');
      this.classList.add('active-direction');
}
      else {
        this.classList.remove('active-direction');
        this.classList.add('direction');
      }
}
}

при нажатии на блок меню меняется стиль - это готово, но также должен добавляться стиль plane-active и remove container-number но если их добавлять функцию то он их не видит, например, plane.classList.add('plave active')

Answer 1

Добавлять несколько классов можно так:

elem.classList.add("first", "second", "third");

// или

elem.classList.add(...["first","second","third"]);

Удалять так:

elem.classList.remove("first", "second", "third");

// или

elem.classList.remove(...["first","second","third"]);

БЛОГ НА HUSL

Не работает несколько раз classList add/remove

Ответы (1 шт):