Jak napisać ,,przełącznik" ikonek w JS?

Question

const passOff = document.querySelector("#passOFF")
const passOn = document.querySelector("#passON")
const passSwitch = document.querySelector("#passSwitch")

passSwitch.addEventListener("click", function(){
    if(passOn.style.display="block"){
        passOn.style.display="none"
        passOff.style.display="block"
    }
    else{
        passOff.style.display="none"
        passOn.style.display="block"
    }
})

                <button type="button" id="passSwitch">
                    <span id="passON"><ion-icon name="eye-outline"></ion-icon></span>
                    <span id="passOFF"><ion-icon name="eye-off-outline"></ion-icon></span>
                </button>

Problem polega w tym, że ikonki nie podmieniają się kiedy ponownie wcisnę buttona

Answer 1

if(passOn.style.display="block"){

Tutaj powinieneś porównać wartość "block", zamiast ją przypisywać.

Comments

dzięki wielkie za pomoc. Zadam jeszcze jedno pytanko na szybko, ikona zmienia się dopiero po drugim kliknięciu. Myślę, że to może mieć coś związanego z klasami to prawda?

                #passOFF{
                    display: none;
                }
                #passON{
                    display: block;
                }

 

---

To nie są klasy tylko identyfikatory (i powinno się unikać stylowania po ID). Property style.display sprawdza style inline, nie te ustawione z CSS - w tym przypadku trzeba odczytać style wyliczone poprzez window.getComputedStyle. Lepiej natomiast jakbyś ostylował to poprzez klasy, wtedy aktualnie ustawioną klasę sprawdzisz poprzez classList.contains, a zmiany dokonasz metodą classList.toggle.