Combining MouseIn with OnClick doesn't work

Ask the community
,
1

Dear community,

I’m trying to combine MouseIn with OnClick in wix Code. Here is what I’m trying to achieve.

1264×681 36.7 KB

There are 3 icon’s that the user is able to click on. When clicking on another icon it will change the text to the one of that part.

2560×1440 174 KB

When I hover with my mouse over the third Icon, the edited icon shows up as if you are hovering over it. Exacly what should happen. However, then when I click on it, the edited Icon should stay, but it doesn’t.

1298×671 35 KB

Everything will change what need to change, except the edited picture, it will not stay and the “lighter icon” will take its place again.

Here are my codes:

$w.onReady( function () {
//TODO: write your page related code here…

});

export function b_click(event) {
//Add your code for this event here:
$w(‘#kandidaat’).hide()
$w(‘#match’).hide()
$w(‘#kandidaatbold’).hide()
$w(‘#Kandidatenanalysetekst’).hide()
$w(‘#Arrow2’).hide()
$w(‘#line13’).hide()
$w(‘#line12’).hide()
$w(‘#integralebold’).hide()
$w(‘#integralematchtekst’).hide()
$w(‘#arrow3’).hide()
$w(‘#lijn3’).hide()
$w(‘#lijn4’).hide()
$w(‘#functiebold’).show()
$w(‘#functieanalysetekst’).show()
$w(‘#arrow1’).show()
$w(‘#Lijn1’).show()
$w(‘#lijn2’).show()
$w(‘#functie’).show()
}

export function box2_click(event) {
//Add your code for this event here:
$w(‘#match’).hide()
$w(‘#functie’).hide()
$w(‘#functiebold’).hide()
$w(‘#functieanalysetekst’).hide()
$w(‘#arrow1’).hide()
$w(‘#Lijn1’).hide()
$w(‘#lijn2’).hide()
$w(‘#integralebold’).hide()
$w(‘#integralematchtekst’).hide()
$w(‘#arrow3’).hide()
$w(‘#lijn3’).hide()
$w(‘#lijn4’).hide()
$w(‘#kandidaatbold’).show()
$w(‘#Kandidatenanalysetekst’).show()
$w(‘#Arrow2’).show()
$w(‘#line13’).show()
$w(‘#line12’).show()
$w(‘#kandidaat’).show()
$w(‘#functie50’).show()

}

export function box3_click(event) {
//Add your code for this event here:
$w(‘#kandidaat’).hide()
$w(‘#functie’).hide()
$w(‘#functiebold’).hide()
$w(‘#functieanalysetekst’).hide()
$w(‘#arrow1’).hide()
$w(‘#Lijn1’).hide()
$w(‘#lijn2’).hide()
$w(‘#kandidaatbold’).hide()
$w(‘#Kandidatenanalysetekst’).hide()
$w(‘#Arrow2’).hide()
$w(‘#line13’).hide()
$w(‘#line12’).hide()
$w(‘#integralebold’).show()
$w(‘#integralematchtekst’).show()
$w(‘#arrow3’).show()
$w(‘#lijn3’).show()
$w(‘#lijn4’).show()
$w(‘#match’).show()
$w(‘#functie50’).show()
}

export function box3_mouseIn(event) {
//Add your code for this event here:
$w(‘#match’).show()
}

export function box3_mouseOut(event) {
//Add your code for this event here:
$w(‘#match’).hide()
}

export function box2_mouseIn(event) {
//Add your code for this event here:
$w(‘#kandidaat’).show()
}

export function box2_mouseOut(event) {
//Add your code for this event here:
$w(‘#kandidaat’).hide()
}

Thank you for your help, much appriciated!

2

Well it is correct but that happens because you have an MouseOut event and no matter if you click the icon or not when moving the mouse out that will trigger and the wrong icon will appear again. You will need to add variable to check state in your click event and in your mouseOut event.

Mouse In

export function box3_mouseIn(event) {  
  //You can leave this as it is
  $w('#match').show();
}

Click Event

// Above this function I will add a variable to hold the actions
let box1Clicked = false;
let box2Clicked = false;
let box3Clicked = false;
export function box3_click(event) {  
  //Leave all other show hide stuff but concentrate on the below
  box1Clicked = false;
  box2Clicked = false;
  box3Clicked = true;
  $w('#match').show();
}

Mouse Out

export function box3_mouseOut(event) {  
  //Add your code for this event here:      
  if (!box3Clicked) {
    $w('#match').hide()
  } 
}

This has to be done for all three icons of course.

3

Thanks for your helping hand here Andreas, however it seems not to work yet (My knowledge is very basic in this…)

Here is how my code looks now. When I preview I can’t click any icon anymore and nothing seems to work now.

export function box3_click(event) {
//Add your code for this event here:
box1Clicked = false ;
box2Clicked = false ;
box3Clicked = true ;
$w(‘#match’).show();
$w(‘#kandidaat’).hide()
$w(‘#functie’).hide()
$w(‘#functiebold’).hide()
$w(‘#functieanalysetekst’).hide()
$w(‘#arrow1’).hide()
$w(‘#Lijn1’).hide()
$w(‘#lijn2’).hide()
$w(‘#kandidaatbold’).hide()
$w(‘#Kandidatenanalysetekst’).hide()
$w(‘#Arrow2’).hide()
$w(‘#line13’).hide()
$w(‘#line12’).hide()
$w(‘#integralebold’).show()
$w(‘#integralematchtekst’).show()
$w(‘#arrow3’).show()
$w(‘#lijn3’).show()
$w(‘#lijn4’).show()
$w(‘#match’).show()
$w(‘#functie50’).show()
}

let box1Clicked = false ;
let box2Clicked = false ;
let box3Clicked = false ;
export function box3_mouseIn(event) {
//Add your code for this event here:
$w(‘#match’).show()

}

export function box3_mouseOut(event) {
//Add your code for this event here:
if (!box3Clicked) {
$w(‘#match’).hide()
}

export function box2_mouseIn(event) {
//Add your code for this event here:
$w(‘#kandidaat’).show()
}

export function box2_mouseOut(event) {
//Add your code for this event here:
$w(‘#kandidaat’).hide()
}

4

@jhock Add these three lines to your top on the page after all import statements.

et box1Clicked = false ; let box2Clicked = false ; let box3Clicked = false ;

5

@andreas-kviby I guess I’m doing something wrong because it’s still not working. Let me show you my full code:

let box1Clicked = false ; let box2Clicked = false ; let box3Clicked = false ;

$w.onReady( function () {
//TODO: write your page related code here…

});

export function b_click(event) {
//Add your code for this event here:
box1Clicked = true ;
box2Clicked = false ;
box3Clicked = false ;
$w(‘#kandidaat’).hide()
$w(‘#match’).hide()
$w(‘#kandidaatbold’).hide()
$w(‘#Kandidatenanalysetekst’).hide()
$w(‘#Arrow2’).hide()
$w(‘#line13’).hide()
$w(‘#line12’).hide()
$w(‘#integralebold’).hide()
$w(‘#integralematchtekst’).hide()
$w(‘#arrow3’).hide()
$w(‘#lijn3’).hide()
$w(‘#lijn4’).hide()
$w(‘#functiebold’).show()
$w(‘#functieanalysetekst’).show()
$w(‘#arrow1’).show()
$w(‘#Lijn1’).show()
$w(‘#lijn2’).show()
$w(‘#functie’).show()
}

export function box2_click(event) {
//Add your code for this event here:
box1Clicked = false ;
box2Clicked = true ;
box3Clicked = false ;
$w(‘#match’).hide()
$w(‘#functie’).hide()
$w(‘#functiebold’).hide()
$w(‘#functieanalysetekst’).hide()
$w(‘#arrow1’).hide()
$w(‘#Lijn1’).hide()
$w(‘#lijn2’).hide()
$w(‘#integralebold’).hide()
$w(‘#integralematchtekst’).hide()
$w(‘#arrow3’).hide()
$w(‘#lijn3’).hide()
$w(‘#lijn4’).hide()
$w(‘#kandidaatbold’).show()
$w(‘#Kandidatenanalysetekst’).show()
$w(‘#Arrow2’).show()
$w(‘#line13’).show()
$w(‘#line12’).show()
$w(‘#kandidaat’).show()
$w(‘#functie50’).show()

}

export function box3_click(event) {
//Add your code for this event here:
box1Clicked = false ;
box2Clicked = false ;
box3Clicked = true ;
$w(‘#match’).show();
$w(‘#kandidaat’).hide()
$w(‘#functie’).hide()
$w(‘#functiebold’).hide()
$w(‘#functieanalysetekst’).hide()
$w(‘#arrow1’).hide()
$w(‘#Lijn1’).hide()
$w(‘#lijn2’).hide()
$w(‘#kandidaatbold’).hide()
$w(‘#Kandidatenanalysetekst’).hide()
$w(‘#Arrow2’).hide()
$w(‘#line13’).hide()
$w(‘#line12’).hide()
$w(‘#integralebold’).show()
$w(‘#integralematchtekst’).show()
$w(‘#arrow3’).show()
$w(‘#lijn3’).show()
$w(‘#lijn4’).show()
$w(‘#match’).show()
$w(‘#functie50’).show()
}

export function box3_mouseIn(event) {
//Add your code for this event here:
$w(‘#match’).show()

}

export function box3_mouseOut(event) {
//Add your code for this event here:
if (!box3Clicked) {
$w(‘#match’).hide()
}

export function box2_mouseIn(event) {
//Add your code for this event here:
$w(‘#kandidaat’).show()
}

export function box2_mouseOut(event) {
//Add your code for this event here:
if (!box2Clicked) {
$w(‘#kandidaat’).hide()
}

Also it’s giving me an error at export function box2_mouseIn(event) which is:
Parsing error: ‘import’ and ‘export’ may only appear at the top level

6

@andreas-kviby Could you get back at me when you have time?

7

@jhock invite hello@pilgrimsbo.com as admin and I will help you.

8

@andreas-kviby I’ve invited you. It’s on page newwervingenofselectie. Thanks!!

9

What is the page name?

10

@andreas-kviby newwervingenofselectie

11

@jhock Hey, you will have to wait until Thursday to fix it. I am sorry but I have been away to much today,

12

@jhock You are still in the editor so I can’t edit

13

@jhock The code to make the three icons show and hide and working is below. You can see a movie here from your site that it works. Due to you are in the editor I am not saving anything.

Movie
https://screencast.com/t/oo8J0eyA

export function hideAll() {
$w("#functie").hide();
$w("#kandidaat").hide();
$w("#match").hide();
}
export function showSelected(object) {
hideAll();
object.show();
}
export function box2_mouseIn(event) {
showSelected($w('#kandidaat'));
}
export function box2_mouseOut(event) {
hideAll();
}
export function b_mouseIn(event) {
showSelected($w('#functie'));
}
export function b_mouseOut(event) {
hideAll();
}
export function box3_mouseIn(event) {
showSelected($w('#match'));
}
export function box3_mouseOut(event) {
hideAll();
}

Also remember that you will have to delete and re create events on boxes because you did delete event code in page code but you did not take away the events in the properties panel. Just pasting in this code won’t help, you will have to recreate events on all three boxes first and then paste in the code in the right function.

14

@jhock Then add a slider to the page under the grey line, make three slides in that and insert content for the functie in the first, candidate in the second and match in the third. They we just changeSlide when clicking the icons and it will be easier for you. Just make sure to also add te down pointing error into the slides so they end up on the same as chosen.

15

@andreas-kviby Yeah I was working on it, I’m done for now so you can edit :slight_smile: Thanks so much in advance Andreas.