Button hiding when it shouldn't

Ask the community
,
1

I have code on a page to show/hide various buttons, and change corresponding states on a multi-state box. The problem I’m having is that when I click a button, one of them will inexplicably disappear (see video).
The button ID in question is “buttonG5” (code below) and I do not have code on the page for it to show/hide.
My code is below, is this maybe just a bug or is there something in the code that could cause this?

Edit: There’s a better explanation of my setup in a comment below

const btnEl = [
 "buttonGk", "buttonG1", "buttonG2", "buttonG3", "buttonG4", "buttonG5",
]
const multiState = {
    buttonG1: "grade1", buttonG2: "grade2", buttonG3: "grade3",
    buttonG4: "grade4", buttonG5: "grade5", buttonGk: "gradeK",
}

$w.onReady(function () {
 // Program overview buttons
    $w.onReady(function () {
        btnEl.forEach(btnID => {
// When each button is pressed,
            $w("#" + btnID).onClick(() => {
// the state changes.
                $w('#programSummaryBox').changeState(multiState[btnID]);
// Then find the not-clicked buttons, and hide them
 const notClickedBtn = currBtnID => currBtnID !== btnID; 
                $w('#' + btnEl.filter(notClickedBtn).join("hid, #")).hide(); 
                $w(`#${btnID}hid`).show(); // except for the active one. 
            })
        });
    });
})
2

So I am a little bit confused about your question because you mentioned that you have a code to show & hide buttons. Then you mention that a button is disappearing even though you don’t have code for it …

So, yes. You do have code to hide your buttons upon click.

But the logic does not seem correct. I believe you shouldn’t be hiding any of the buttons at all. Instead, you should keep your buttons shown at all times so that user’s can navigate. Does that make sense?

(On another note … you have an onReady within an onReady. This is not necessary.)

Here is your code again … without the extra lines, etc.

const btnEl = [
 "buttonGk", "buttonG1", "buttonG2", "buttonG3", "buttonG4", "buttonG5",
]

const multiState = {
    buttonG1: "grade1",
    buttonG2: "grade2",
    buttonG3: "grade3",
    buttonG4: "grade4",
    buttonG5: "grade5",
    buttonGk: "gradeK",
}

$w.onReady(() => {
    btnEl.forEach(btnID => {
        $w("#" + btnID).onClick(() => {
            $w('#programSummaryBox').changeState(multiState[btnID]);
        })
    });
});
3

Thanks for your response!
Sorry, I should have explained my setup better. For each option I have 2 buttons stacked on each other, one hidden on load (which has a different design). This is so I can show the user which grade level is active when they click on it.

Example Flow:

  1. A user clicks 1st Grade button (ID: "buttonG1)
  2. The state of the multistage box changes to “grade1”
  3. The hidden button shows to indicate the active selection (ID: “buttonG1hid”)
    (same ID setup for all: “buttonG2” > “buttonG2hid” , “buttonG3” > “buttonG3hid” , etc)
    4) ¿¿The 5th Grade button mysteriously vanishes??

Example button setup >

That is what these lines of code are for:

 const notClickedBtn = currBtnID => currBtnID !== btnID; 
 $w('#' + btnEl.filter(notClickedBtn).join("hid, #")).hide(); 
 $w(`#${btnID}hid`).show();

Better explanation: I have code to hide/show the buttons ending in “hid”, but not to hide/show the other buttons.

P.S. - Thanks for spotting the redundant onReady, I totally missed it! The issue still persists without it though…

4

I’m thinking it might be some sort of bug? I’ve already submitted a ticket to Wix Support to see if they can be of assistance (though they have never responded to my past tickets :stuck_out_tongue_winking_eye:).

I just wanted to check if there was something in my code I might have missed…

5

Update: When I use the following code (which should be doing the same exact thing) everything works as expected.
I previously had this version but I wanted to simplify the code. But since for some reason my other setup isn’t functioning properly, unless anyone has a suggestion I’ll just use this “uglier” version that works.

$w.onReady(function () {
    $w("#buttonG1").onClick(() => {
        $w('#programSummaryBox').changeState("grade1");
        $w('#buttonGkhid, #buttonG2hid, #buttonG3hid, #buttonG4hid, #buttonG5hid').hide();
        $w('#buttonG1hid').show();
    })

    $w("#buttonG2").onClick(() => {
        $w('#programSummaryBox').changeState("grade2");
        $w('#buttonGkhid, #buttonG1hid, #buttonG3hid, #buttonG4hid, #buttonG5hid').hide();
        $w('#buttonG2hid').show();
    })

    $w("#buttonG3").onClick(() => {
        $w('#programSummaryBox').changeState("grade3");
        $w('#buttonGkhid, #buttonG1hid, #buttonG2hid, #buttonG4hid, #buttonG5hid').hide();
        $w('#buttonG3hid').show();
    })

    $w("#buttonG4").onClick(() => {
        $w('#programSummaryBox').changeState("grade4");
        $w('#buttonGkhid, #buttonG1hid, #buttonG2hid, #buttonG3hid, #buttonG5hid').hide();
        $w('#buttonG4hid').show();
    })

    $w("#buttonG5").onClick(() => {
        $w('#programSummaryBox').changeState("grade5");
        $w('#buttonGkhid, #buttonG1hid, #buttonG2hid, #buttonG3hid, #buttonG4hid').hide();
        $w('#buttonG5hid').show();
    })

    $w("#buttonGk").onClick(() => {
        $w('#programSummaryBox').changeState("gradeK");
        $w('#buttonG1hid, #buttonG2hid, #buttonG3hid, #buttonG4hid, #buttonG5hid').hide();
        $w('#buttonGkhid').show();
    })
});