What would be a better way to write switching 2 state code in JavaScript?

Question

So im writing some code for a website that i've implemented which is a simple hide/show function. And i've been thinking about how I can go about writing this or similar code shorter, concise or more efficient.

To be specific, how to easily have a "switch" state that switches between 2 if statements.

let selectedArrow = document.getElementsByClassName('arrows');
let state = 0;
for (let i = 0; i < selectedArrow.length; i++) {
    selectedArrow[i].addEventListener('click', function() {
        let id = event.target;
        let target = event.target.parentElement.nextElementSibling;
        if(state === 0) {
            id.style.transform = 'rotate(-90deg)'
            target.style.display = 'none';
            state = 1;
        } else if(state === 1) {
            id.style.transform = 'rotate(0deg)'
            target.style.display = 'grid';
            state = 0;
        }
    });
}

This code works perfectly fine, just wondering if others have any other tricks as i'm a beginner coder.

Answer 1

I hope this helps, here i use marker class in dom to store state:

 let bindClick = e => e.onclick = e => e.target.classList.toggle('active'); [...document.querySelectorAll('.arrows')].forEach(bindClick)

 .arrows { border: solid; width: 50px; display: inline-block; line-height: 50px; text-align: center; font: 44px arial; margin: 10px; cursor: pointer; transition: ease-in 300ms; } .active { color: red; transform: rotate(-45deg); }

 <div class='arrows active'>1</div> <div class='arrows'>2</div> <div class='arrows'>3</div> <div class='arrows active'>4</div> <div class='arrows'>5</div> <div class='arrows'>6</div>

[...expr] is used because forEach iteration over NodeList which returned from document.querySelectorAll dont implemented in some browsers... or implemented not so long time ago

---

Here is alternative if you dont want to use styling for manage state represenation:

 [...document.querySelectorAll('.arrows')].forEach(e => e.onclick = e => { e.target.classList.toggle('active'); let v = e.target.classList.contains('active'); e.target.style.transform = `rotate(${v ? -45 : 0}deg)`; e.target.style.color = v ? 'red' : 'black'; })

 .arrows { border: solid; width: 50px; height: 50px; display: inline-block; line-height: 50px; text-align: center; font-size: 40px; margin: 10px; cursor: pointer; }

 <div class='arrows'>1</div> <div class='arrows'>2</div> <div class='arrows'>3</div> <div class='arrows'>4</div> <div class='arrows'>5</div> <div class='arrows'>6</div>

Answer 2

Firstly, function switch will error out - this doesn't need the switch (it's reserved anyway). Secondly, you can use some fancy ternaries and template literals:

let selectedArrow = document.getElementsByClassName('arrows');
let state = 0;
for (let i = 0; i < selectedArrow.length; i++) {
    selectedArrow[i].addEventListener('click', function() {
        let id = event.target;
        let target = event.target.parentElement.nextElementSibling;
        id.style.transform = `rotate(${-90 + (state * 90)})`;
        target.style.display = id ? "grid" : "none";
        state = state ? 0 : 1;
    });
}