обработчики, нужно сделать кнопку с событием

Question

На кнопку повесить обработчик, который будет по клику удалять классы с блока с результатом по очереди в таком порядке:

six -> two -> three -> four -> one -> five

После того, как блок окажется пустым, добавить их в порядке возрастания:

one -> two -> three -> … -> six правильно ли я сделал?

 
           
 function clickClass() {
let resultPanel = document.getElementById("clickResult");
if (resultPanel.classList.contains("down")) {
    switch (resultPanel.classList.length) {
        case 7:
            resultPanel.classList.remove("six");
            break;
        case 6:
            resultPanel.classList.remove("two");
            break;
        case 5:
            resultPanel.classList.remove("three");
            break;
        case 4:
            resultPanel.classList.remove("four");
            break;
        case 3:
            resultPanel.classList.remove("one");
            break;
        case 2:
            resultPanel.classList.remove("five");
            resultPanel.classList.replace("down", "up");
            break;
    }
}
else if (resultPanel.classList.contains("up")) {
    switch (resultPanel.classList.length) {
        case 1:
            resultPanel.classList.add("one");
            break;
        case 2:
            resultPanel.classList.add("two");
            break;
        case 3:
            resultPanel.classList.add("three");
            break;
        case 4:
            resultPanel.classList.add("four");
            break;
        case 5:
            resultPanel.classList.add("five");
            break;
        case 6:
            resultPanel.classList.add("six");
            resultPanel.classList.replace("up", "down");
            break;
    }
}
}

.one {
  font-size: 22px;
}
 
.two {
  font-weight: bold;
}
 
.three {
  font-style: italic;
}
 
.four {
  text-align: right;
}
 
.five {
  font-style: oblique;
}
 
.six {
  color: blue;
}

  <div class="clickWrapper">
 
        <button class="clickButton" onclick="clickClass()">Click button</button>
        <div id="clickResult" class="one two three four five six down">one two three four five six</div>
                         
    </div>

БЛОГ НА HUSL

обработчики, нужно сделать кнопку с событием

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