Разве нельзя использовать модификацию dom в JS CLASS?

Question

Я просто пытаюсь переписать свой спагетти-код в класс js. Здесь что-то пошло не так, но я не знаю, что это. Может кто-нибудь проверить это пожалуйста?

    class dmlMenu {
    constructor(){
       this.toggleStatus = false;
       this.h = -100;
       this.b = -100;
       this.domEls = document.getElementsByClassName('v_navEl');
    }
    toggleMenu(){
       if(this.toggleStatus){
            this.domEls.forEach( e => {    
                e.removeAttribute('style');
            });
            this.toggleStatus = false;
        } else {
           this.domEls.forEach( e => {    
            e.style.transform = 'translate(' + this.h + 'px , ' + this.b + 'px )';
                this.h = this.h+50;
                this.b = this.b-50;
            });
            this.toggleStatus = true; 
            this.h = -100;
            this.b = -100;
        } 
    }
}

let menu = new dmlMenu();
// Event Listener
document.getElementById('v_addBtn').addEventListener('click', menu.toggleMenu());

https://codepen.io/digimedialoop/pen/GRJWOGo

Answer 1

В вашем коде есть две ошибки:

Прежде всего, вы неправильно вызываете toggleMenu(): сделайте это в анонимной функции в качестве обратного вызова. В противном случае вы просто вызываете его немедленно, а это не то, что вам нужно.

document.getElementById('v_addBtn').addEventListener('click', menu.toggleMenu());

Во-вторых, метод document.getElementsByClassName() возвращает HTMLCollection, для которой .forEach() не существует. Вы можете сначала преобразовать их в массив, например:

Array.from(this.domEls).forEach(e => {
    // Rest of the logic here
});

---

См. Ваш фиксированный пример здесь:

class dmlMenu {
    constructor(){
       this.toggleStatus = false;
       this.h = -100;
       this.b = -100;
       this.domEls = document.getElementsByClassName('v_navEl');
    }
    toggleMenu(){
       if(this.toggleStatus){
            Array.from(this.domEls).forEach( e => {    
                e.removeAttribute('style');
            });
            this.toggleStatus = false;
        } else {
           Array.from(this.domEls).forEach( e => {    
            e.style.transform = 'translate(' + this.h + 'px , ' + this.b + 'px )';
                this.h = this.h+50;
                this.b = this.b-50;
            });
            this.toggleStatus = true; 
            this.h = -100;
            this.b = -100;
        } 
    }
}

let menu = new dmlMenu();
// Event Listener
document.getElementById('v_addBtn').addEventListener('click', () => menu.toggleMenu());

#v_menu {
  width: 400px;
  height: 400px;
  position: relative;
  font-size: 2rem;
}
#v_menu .v_Btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: 15%;
  border-radius: 50%;
}
#v_menu .v_Btn i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#v_menu .v_Btn i .active {
  transition: 1s;
}
#v_menu .v_navEl {
  z-index: 50;
  background-color: #67caac;
  color: white;
  font-size: 1rem;
  border: 2px solid #67caac;
}
#v_menu #v_addBtn {
  z-index: 100;
  background-color: #454545;
  color: white;
  border: 2px solid #454545;
}
#v_menu #v_addBtn:hover {
  background-color: white;
  color: #454545;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<div id="v_menu">
    <div id="v_addBtn" class="v_Btn">
        <i class="fas fa-plus"></i>
    </div>
    <div class="v_navEl v_Btn">
        <i class="far fa-building"></i>
    </div>

    <div class="v_navEl v_Btn">
        <i class="fas fa-tasks"></i>
    </div>
    <div class="v_navEl v_Btn">
        <i class="fas fa-project-diagram"></i>
    </div>
</div>