Button works on second click, not on first click [Solved]

I’m having similar trouble to the post here: https://www.wix.com/code/home/forum/community-discussion/link-string-value-work-from-second-click-and-up, only slightly different context.

I set up a button (with id compareAll) to change the visible/hidden content on part of a page when the button is clicked. However, the button never works on the 1st click: it always takes 2 clicks (but not a double-click) for the button to do what it’s supposed to do, and then It works perfectly - until I reload the page.

I get the same behavior with both onClick(event) and click(event), I have the button itself pulled to the front of the page, and I have the event attached to the button through the Properties Panel.

I’d appreciate any help with this problem. :slight_smile:

Here’s the relevant code:

let showing = 'hover'; 
 
let fadeOptions8 = {
  "duration": 1200,
  "delay": 0
};

export function compareAll_onClick(event) {
  if (showing === 'hover') {
    $w("#box2").hide("fade", fadeOptions8);
    $w("#box1, #text147").show("fade", fadeOptions8);
    $w("#compareAll").label = "Compare All";
    showing = 'competitionAll';
  }
  else {
    $w("#box2").show("fade", fadeOptions8);
    $w("#box1, #text147").hide("fade", fadeOptions8);
    $w("#compareAll").label = "Hide Table";
    showing = 'hover';
  }
}

Problem solved! Thank you, Wix Support!

Here’s the code that works, in case anyone else makes this mistake in the future. :slight_smile:

$w.onReady( function() {
 return compareAll_onClick()
});

let showing = 'hover';
 
let fadeOptions8 = {
 "duration": 1200,
 "delay": 0
};

export function compareAll_onClick(event) {
 if (showing === 'hover') {
        $w("#box2").hide("fade", fadeOptions8);
        $w("#box1, #text147").show("fade", fadeOptions8);
        $w("#compareAll").label = "Compare All";
        showing = 'competitionAll';
    } else {
        $w('#box2').show("fade", fadeOptions8);
        $w("#box1, #text147").hide("fade", fadeOptions8);
        $w("#compareAll").label = "Hide Table";
        showing = 'hover';
    }
}

Hi!!! So the solution is to put it also in onRready function?

Hi!!! So the solution is to put it also in onRready function?