First use of Wix Code, change color of text element on hover

Ask the community
,
1

Hi there!

I’m happy to be figuring out Wix Code a little. I hope it provides much of what I want to add to my site in terms of customization.

So! I’m trying to create a mouseover hover event with a text box, I’m not using a button with hover option because I cannot create a line break in the text with a button, and I want the text element to be on two lines. It is visible here: https://www.vanislandsfinest.ca/home, in the header, “BEST BUDS Referrals Program”.

The following is the code as I have determined it, mostly researching, using copy and paste:

export function text91_mouseIn(event, $w) {
$w.onReady( function () {
$w.onReady( function () {
$w(‘#text91’).onMouseIn(() => { hoverTxt(); });
$w(‘#text91’).onMouseOut(() => { unhoverText(); });
});

function hoverTxt() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = $w(‘#text91’).html = “

BEST BUDS
Referrals Program

”;
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}

function unhoverText() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = oldHtmlStr.replace(‘/#000000/I’, ‘#50AB48’);
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}

SO, I’m not a programmer but sort of understand the above, though when I try to input this code, it returns a red parsing error at the very end. I researched further, and found that I’m not closing the brackets properly. However I am not sure of how to proceed to check or test, or which bracket or where it is that I need to close it!

If it is possible for you to help, it will be much appreciated. The answer as well as a little explanation of how to proceed next time it occurs.

Thank you kindly,
Brenden

2

Ahh, I changed the $w.onReadyFunction line, and managed to close the bracket correctly to make the error in the code disappear. This is my code currently as of now:

export function text91_mouseIn(event, $w) {
$w.onReady( function () {
$w(‘#text91’).onMouseIn(() => { hoverTxt(); });
$w(‘#text91’).onMouseOut(() => { unhoverText(); });
});

function hoverTxt() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = $w(‘#text91’).html = “

BEST BUDS
Referrals Program

”;
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}}

function unhoverText() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = oldHtmlStr.replace(‘/#000000/I’, ‘#50AB48’);
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}

Now the error is during “Preview” and the error in the console is given as “onReady is not a function”

3

Hi,
You can use the Format Code button to check which button is not closed properly:

1022×321 16.2 KB

As for the onReady error- you haven’t share with us the onReady function so… we cannot check what causing this error message…

Best,
Tal.

4

Thank you very much for trying to help.
As for onReady functions, I probably am using it incorrectly. That probably came from the source code I copied from.
Maybe I need another function altogether.
What I want is to “hover” over the “text element” and have it change color like many other “buttons” on my page. Buttons have a hover option, text elements do not have built in hover options.

Do you know what might be the function I need?

5

Hi again Tal,

I found your advice to another user doing something similar. Right now I’ve refined code to the following. Everything seems to be working except the color isn’t changing from green to black when I hover over the text:

export function text91_mouseIn(event, $w) {
$w(‘#text91’).onMouseIn(() => { hoverTxt(); });
$w(‘#text91’).onMouseOut(() => { unhoverText(); });
}

function hoverTxt() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = oldHtmlStr.replace(/#50AB48/i, ‘#000000’);
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}

function unhoverText() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = oldHtmlStr.replace(‘/#000000’, ‘#50AB48’);
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}

6

I keep trying without more advice… Right now on my live site it will turn black on hover but not green onMouseOut. Not sure how to separate the events in the script:

This time I will wait because I am almost there.

Thanks in advance for your help!!

export function text91_mouseIn(event, $w) {
$w(‘#text91’).onMouseIn(() => { hoverTxt(); });
$w(‘#text91’).onMouseOut(() => { unhoverText(); });
}

function hoverTxt() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = oldHtmlStr.replace(/#50AB48/i, ‘#000000’);
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}

function unhoverText() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = oldHtmlStr.replace(‘/#000000’, ‘#50AB48’);
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}

export function text91_mouseOut(event, $w) {
$w(‘#text91’).onMouseIn(() => { hoverTxt(); });
$w(‘#text91’).onMouseOut(() => { unhoverText(); });
}

function hoverTxt() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = oldHtmlStr.replace(/#50AB48/i, ‘#000000’);
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}

function unhoverText() {
let oldHtmlStr = $w(‘#text91’).html;
let newHtmlStr = oldHtmlStr.replace(‘/#000000’, ‘#50AB48’);
console.log(newHtmlStr);
$w(‘#text91’).html = newHtmlStr;
}//Add your code for this event here:

7

my page https://www.vanislandsfinest.ca/home

8

Hi i have this problem solved to 60-70% i just need help with retrieving the unique URLs with the contain() or get() functions from their respective database collection in a query, then displaying the number of referrals in a number box. Any help or sample code where I can plug in some values?