Multiple if statements - what am I doing wrong?

I’m trying to use multiple if statements to assign a value to variable “option1”, dependent on whether 3 vector art images (“cross1”, “cross2” and “cross3”) are hidden or visible (they are either hidden or visible). No matter whether the images are visible or hidden, my code always assigns 8 as the value of option1, when it should be assigning different values.

I’ve been trying to figure this out for 2 days - it’s driving me crazy! Does anyone know where I’m going wrong?

The code is:


export function button3_click(event) {
//assign option 1
if ($w(“#cross1”).hidden && $w(“#cross2”).hidden && $w(“#cross3”).hidden){ var option1 = 1}
if ($w(“#cross1”).hidden && $w(“#cross2”).hidden && $w(“#cross3”).isVisible){ option1 = 2}
if ($w(“#cross1”).hidden && $w(“#cross2”).isVisible && $w(“#cross3”).isVisible){ option1 = 3}
if ($w(“#cross1”).hidden && $w(“#cross2”).isVisible && $w(“#cross3”).hidden){ option1 = 4}
if ($w(“#cross1”).isVisible && $w(“#cross2”).hidden && $w(“#cross3”).hidden){ option1 = 5}
if ($w(“#cross1”).isVisible && $w(“#cross2”).isVisible && $w(“#cross3”).hidden){ option1 = 6}
if ($w(“#cross1”).isVisible && $w(“#cross2”).hidden && $w(“#cross3”).isVisible){ option1 = 7}
else { option1 = 8}
}

Hi John:

Yes each if statement in your list operates independently of the others except the last one because of the way you have written the code.
Basically the only if statement that will deliver you a result is the last one because you have used the else statement.
What you really need to do is consider nesting the conditionals which might be more efficient also.
You need something like this:

var option1 = 0;
if ($w("#cross1").hidden) {
     if ($w("#cross2").hidden) {
         if ($w("#cross3").hidden) {
             // cross1 hidden, cross2 hidden, cross3 hidden
             option1 = 1;
         } else {
             // cross1 hidden, cross2 hidden, cross3 visible              
             option1 = 2;
         }
     } else {
         if ($w("#cross3").hidden) { 
             // cross1 hidden, cross2 visible, cross3 hidden              
             option1 = 4; 
         } else {
             // cross1 hidden, cross2 visible, cross3 visible
             option1 = 3;
         }
     }
 } else {
     if ($w("#cross2").hidden) { 
         if ($w("#cross3").hidden) {
             // cross1 visible, cross2 hidden, cross3 hidden                  
             option1 = 5;
         } else {
             // cross1 visible, cross2 hidden, cross3 visible                                
             option1 = 7;
         }
     } else {
        if ($w("#cross3").hidden) {
             // cross1 visible, cross2 visible, cross3 hidden                            
             option1 = 6;
        } else {
            // cross1 visible, cross2 visible, cross3 visible              
            option1 = 8;
        }
    }
 }

Another way is to set up a test mask which should simplify your code

// The mask has three bit positions 0 1 and 2
// Binary map to decimal
// Binary          Decimal    Cross3    Cross2    Cross1   Option
//________________________________________________________________
// 000             0          hidden    hidden    hidden      1
// 001             1          hidden    hidden    visible     5
// 010             2          hidden    visible   hidden      4
// 011             3          hidden    visible   visible     6
// 100             4          visible   hidden    hidden      2
// 101             5          visible   hidden    visible     7
// 110             6          visible   visible   hidden      3
// 111             7          visible   visible   visible     8
// This is a binary mask that is used as an index into our results array 
let index = 0; 
// Cross 1 sets the bit 0 to zero when hidden and 1 otherwise
index += ($w('#cross1').hidden?0:1); 
// Cross 2 sets the bit 1 to zero when hidden and 1 otherwise
index += ($w('#cross2').hidden?0:2);
// Cross 3 sets the bit 2 to zero when hidden and 1 otherwise
index += ($w('#cross3').hidden?0:4);
// Option values based on initial question.
let options = [1,5,4,6,2,7,3,8];
option1 = options[index];

hope this helps.

1 Like

Thank you so much for the response! I decided to go with the second solution, as it’s so elegant and efficient.

My problem is now that the value of $w(’ #cross X’).hidden is always being assessed as false, even when the cross vector images are obviously hidden (e.g. hidden on load, without being altered).

Has anyone had similar experience with the hidden property being returned as a value which seems obviously incorrect?

Hi John:
I think there may be a bug in the $w.HiddenMixin api from wix. I have noted recently that the show() and hide() functions are also misbehaving. Probably creating a specific post addressing this as a bug in the $w.HiddenMixin api would be the thing to do. Then reference it here, I’ll give it a thumbs up.

Steve

1 Like

Thanks so much. I have posted in a new thread here https://www.wix.com/code/homeforum/community-discussion/w-hiddenmixin-api-bug