Buttons act weird due to .classList.toggle

I have a menu with some arrow buttons. If you click on those arrow buttons, one more div appears.

It’s working fine – but I noticed something strange. If I press on the right arrow 9 times (until all the 10 divs are shown), on the left arrow 9 times (until only the first div is shown) and then try to press on the right arrow 9 times (so all 10 divs are shown again) the menu gets stuck at the 8th div and I don’t understand why.

Is anything wrong with my code?

let classCounter = 1;
let pasiExecutie = document.querySelectorAll(".pas-executie");

document.querySelector(".fa-arrow-right").addEventListener("click", function() {
    if(classCounter < 10)
    {
        classCounter++;
        document.querySelector(".pas" + classCounter.toString()).classList.toggle("hide");
    }  
});

document.querySelector(".fa-arrow-left").addEventListener("click", function() {
    if(classCounter > 1)
    {
        classCounter--;
        document.querySelector(".pas" + classCounter.toString()).classList.toggle("hide");
    }  
});

.hide {
    display: none !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Divide et Impera</title>
    <script src="https://kit.fontawesome.com/6612084f00.js" crossorigin="anonymous"></script>
</head>
<body>
            <div class="executie-problema executie problema">
                <div class="row d-flex justify-content-center align-items-center vh-100">
                      <span style="color: #77dff1;">Pasi executie:</span><br>
                      <ol class="pasi-executie" id="pasi-exec">
                        <li class="pas-executie pas1">isBstUtil(4, INT_MIN, INT_MAX) – Nodul nu este null si se afla in [INT_MIN, INT_MAX] =></li>
                        <li class="pas-executie pas2 hide">isBstUtil(2,INT_MIN,3) – Nodul nu este null si se afla in [INT_MIN, 3] =></li>
                        <li class="pas-executie pas3 hide">isBstUtil(1,INT_MIN,1) – Nodul nu este null si se afla in [INT_MIN,1] => </li>
                        <li class="pas-executie pas4 hide">isBstUtil(NULL,INT_MIN,0) – Nodul este NULL, se returneaza 1 => </li>
                        <li class="pas-executie pas5 hide">se apeleaza ramura 2 a returnului anterior, si anume isBstUtil(NULL,2,1) – Nodul este NULL, se returneaza 1 =></li>
                        <li class="pas-executie pas6 hide">s-a terminat ramura din stanga a lui 2, acum algoritmul verifica ramura dreapta si anume isBstUtil(3,3,3) – Nodul nu este NULL si se afla in [3,3] =></li>
                        <li class="pas-executie pas7 hide">isBstUtil(NULL,3,2) – Nodul este NULL, se returneaza 1 =></li>
                        <li class="pas-executie pas8 hide">se apeleaza ramura 2 a returnului anterior, si anume isBstUtil(NULL,4,3) – Nodul este NULL, se returneaza 1 si acum a fost verificat tot subarborele cu 2 drept radacina, agloritmul va trece acum in partea dreapta a adevaratei radacini =></li>
                        <li class="pas-executie pas9 hide">isBstUtil(5,5,INT_MAX) – Nodul nu este NULL si este in [5,INT_MAX] => </li>
                        <li class="pas-executie pas10 hide">isBstUtil (NULL,5,4) – Nodul este NULL, se returneaza 1 si se apeleaza ramura 2 a returnului anterior si anume isBstUtil(NULL,6,INT_MAX) – Nodul este NULL, se returneaza 1, ceea ce inseamna ca si subarborele ce are drept radacina 5 este BST, functia se intoarce in 4, si deoarece ambele ramuri ale sale sunt BST, si acesta este BST, functia afisand pe ecran: „Este BST”.</li>
                      </ol>
                      <div class="navigatie-sageti" style="position: absolute; top: 70%; left: 4%;">
                        <i class="fas fa-arrow-left fa-arrow-custom"></i>
                        <i class="fas fa-arrow-right fa-arrow-custom"></i>
                      </div>
                  </div>
                </div> 
</body>
<script src="main.js"></script>
</html>

Why is this happening?

Answer

When you are decrementing classCounter from 10, your function starts with classCounter– so it’s hiding 9th element not 10th.
When you get to classCounter = 1, again your function starts with increment so it’s adding a second element not 1st.
Increment to 10 again and you don’t have 1st (2.) element and 10th (1.) because you are toogling class on an element that is already visible.

In short you should rethink where classCounter++ and classCounter– should be.

Advertisement

Answer