Everything within if else being executed when it shouldn't

Question

I have the following if else statement:

let userIconText = document.getElementsByClassName("iconText");
let userIconDiv = document.getElementById("userIcons");
let rCorners2 = document.getElementById("rcorners2");
let homeContainerDiv = document.getElementById("homePanel");
let icons = document.querySelectorAll('#userIcons li');
document.getElementById("menuFilter").onclick = function(){
    for (let i = 0; i < userIconText.length; i++) {
        for (let j = 0; j < icons.length; j++) {
            if (userIconText[i].style.display !== 'block') {
                userIconText[i].style.display = "block";
                console.log("1");
                userIconDiv.setAttribute("style","width:10vw");
                icons[i].setAttribute("style","margin:75px 20px 0 10px");
                console.log("2");
                homeContainerDiv.setAttribute("style","width:85vw; transform: translateX(5%);");
                rCorners2.setAttribute("style","width: 53vw; left: 295px");
                console.log("3");
            } else {
                userIconText[i].style.display = "none";
                console.log("4");
                userIconDiv.setAttribute("style","width:5vw");
                homeContainerDiv.setAttribute("style","width:90vw");
                console.log("5");
                icons[i].removeAttribute("style", "margin");
                rCorners2.removeAttribute("style", "width");
                console.log("6");
            }
        }
    }
}

Now this was working but now for some reason everything in this statement is being executed, hence why I have the console log of the numbers to test this, when I do click on the "menuFilter" I check the console log and it shows the numbers 1 through to 6. I just don't get why this is now happening, it worked yesterday and now I'm having this issue. So really when I first click on "menuFilter" it shoukd only be everything before the else getting executed and then when I click it again, it should be everything after the else. Any advice on how to sort this would be greatly appreciated

Answer 1

The if-else is inside of two for loops.

On different repetitions, it may trigger different if branches.

That's what I can tell based on the code you posted.

Answer 2

Figured out the issue, thanks for the help. For the userIconText there are 7 elements and due to a change being made, in the icons there are 8 elements, so it seems that due to that, it was running an extra repetition than it should have been which was causing it running the parts after the else condition as well.

So what I've done is add the following to the second for loop:

    for (let j = 0; j < icons.length; j++) {
        if(icons[j].classList.contains("hidden-search")) {
        continue;
    }