Develop Reference

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

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.

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)
} );

Is there anyway to change background-image based on button selected?

I was wondering if anyone knew how I can change background images based on the specific ID that the user selects. I am essentially making a game where people select the right option and the images change based on the right answer/wrong answer. I tried to create a div on my HTML but I have no clue what I would do for the javascript because of my set system already.
Heres my code:
https://codepen.io/tdodia/pen/yLgMgRO
const textElement = document.getElementById('text')
const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')
let state = {}
Also sorry, I had no real clue how to give correct context on the code so
i think the best bet is to look at the codepen link.
Sorry and thank you!

Tay.jis, Have made a few changes ->
You need to dynamically change the image source on button click, that will do the trick for you.
document.getElementById('myImage').src = textNodes[textNodeIndex]['url']
Also,
add a new key "url" in your object with the image you want.
Check the implementation->
https://codepen.io/raishavhanspal/pen/PoWmGVP

how to show markup on a chessboard square in chessboard.js

I'm building a visualization for the Knight's tour problem.
I'm using chessboard-element (Which is basically a modern version of the chessboard.js library), and it has been smooth until I've reached this barrier.
My issue is: I need a way to show markup that indicates the number of the last-played move.
Image of the application
As you can see in the picture above, when the knight is moved manually by the user, or if the move is indicated by the Warnsdorff's rule, I need the resulted square to be marked up with the number of the move Image describing seemingly the desired behavior.
My current approach to this problem is by accessing the element in the DOM using its id and attaching the desired markup for it, but the issue is: even if I tried to do so, it will result in the knight not showing for some reason A picture showing the weird behavior.
const targetId = "square-" + target
const targetEl = Array.from(this.board.shadowRoot.querySelector("[part~='board']").children).find(({ id }) => id === targetId)
targetEl.innerHTML += `<h4>${this.takenSpots.length}</h4>`
Is there's an API in the chessboard-element library that I can use to accomplish the desired output?
If not, is there a css-hack (or similar) around this problem?
If not, is there any other similar chessboard libraries that I can use to solve this issue?
If not, how do you suggest to approach this problem?

Changing an image via Javascript?

Quick question regarding Javascript. I'm working on a Safari Extension for paring down the Google Search page, and I'd like to change the Google logo to a custom image. My plan is to have an injected .js script to put in the extension.
So far, I've tried this:
document.getElementById('img#hplogo').innerHTML =
"<img alt="Google" height="95" id="hplogo" src="logo3w.png" width="275"
style="padding-top:136px" onload="window.lol&&lol()">"
For some clarification, the logo image is under the ID on the Google homepage as "hplogo" or according to Safari Web Inspector, "img#hplogo". I want to replace the src, obviously, with my own logo3w.png that will be located in the root of the extension folder (thus, AFAIK, no advanced directory is needed).
If I could be pointed in the right direction command-wise, that'd be really helpful, but really any and all help is appreciated. Thanks!

You want to do:
document.getElementById("hplogo").src = "logo3w.png";
Note that the "img#hplogo" is not saying that the id of the img element is "img#hplogo", it is saying that you are looking at an "img" element whose id is "hplogo". So when using document.getElementById() you only need to pass "hplogo". In CSS you might say:
img #hplogo {
display: none; //or whatever
}
#hplogo {
display: none; //or whatever
}
And similarly with something like jQuery that supports CSS-style element selectors you might say:
var image = $("#hpLogo");
var theSameImage = $("img #hplogo");
But for document.getElementById() all you need to pass (and all you can pass) is "hplogo".

You may want to change the src attribute of the image:
document.getElementById('img#hplogo').src = 'path/to/your/image.jpg'

Changing the "innerHTML" property changes the inner HTML, not the element itself. The thing you want to do is find the element and change it's "src" property.

How to use onmouseover?

I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..

What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>

You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.

Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.

As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.

For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage