How do I use Javascript to delay visibility of a text box and then hide another box after the first becomes visible

Question

Im very new to this and have reviewed other posts similar to this question. However, I'm finding that those solutions don't work for me.

Background: I'm working in Wix's Velo platform for Javascript. (forgive me if that's not the right technical terminology here)

My goal: When my website home page loads, I want one of the text boxes on the page (#text45) to NOT be visible until 5 seconds have passed. Then, when box #text45 is visible, I want another plain box (#box2) to turn to hidden.

I have found some examples like the one below: (not all code has been pasted and I realize some elements like div1 would need to change to my specific element names)

document.getElementById("div1").style.visibility = "visible"; }

setTimeout("showIt()", 5000);

However, I get an error code: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.

When researching this, I found out that Velo cannot access the dom and elements can only be accessed via "$w".

Would someone be kind enough to set me in the right direction on how to accomplish the "goal" above? I would really appreciate it! Thank you in advance.

Answer 1

Here's how you would do it. Note, that it's good practice to change the IDs of your elements to more descriptive names, but I've stuck with the names you provided in your question.

Start by setting #text45 to hidden in using the Properties & Events panel.

Then use this code (note that your page might already have an onReady. If it's there an you're not using it yet, delete all the code on the page and replace it with this):

$w.onReady( () => {
    setTimeout(() => {
        $w('#text45').show();
        $w('#box2').hide();
    }, 5000)    
} );