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

Toggling an html IMG element's class using JS (no Jquery)

I give up... All of your answers were just different ways of targeting the local element.
If you bothered to actually read what I was saying you would realise that it was not a problem with the code I already had, just that the code DID NOT work on IMG tags.
While faffing around trying to demonstrate my problem (and that none of your solutions did anything different to what was already happening) I found that I can achieve exactly what I want by applying a Grayscale filter to a DIV element placed over each image. The mouseover event then triggers an opacity change in the DIV element.
It is a little heavier that I wanted but it answered my ACTUAL question. The answer being:
Yes, there probably is a way to toggle class of IMG tags. But no, I am probably not going to find it here without causing arguments or being told i'm using "bad code". So yes, it IS easier and more efficient to target DIV elements.
By the way, page load times are about how large data packages are. Larger data packages (images, html/css/js documents, etc) take longer to download and so the page takes longer to load. The website I am trying to create proves this thesis, I have an almost complete and (almost) fully functional website with loads of 'clever' little effects all under 20mb, about 15mb of which is images. This website is clean and simple, is hosted on my Samsung Galaxy Tab 4 (using Papaya) and loads almost instantly.
THIS is what I meant by "I want this to be VERY lite". Thank you all for your attempts to help, it's just a shame that I couldn't get anyone to understand what was going on.

If you add onClick to image element you don't need to pass anything, you will receive MouseEvent which contains all information. You need target from event.
I suggest to not use onClick on element as it is not scalable, you have to add it to all elements. Better to add listener to wrapping/container element and then filter target by some attribute e.g data-something Please check fiddle
So you have wrapping element and you images:
<div class="images-container">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-toggleable class="thumb-gray thumb-color" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-toggleable class="thumb-gray" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-toggleable class="thumb-gray" />
</div>
and you attach listener to you wrapping element. It is best practice as you don't attach listeners to each element and same time you are able easily scale your solution
var imagesContainerEl = document.querySelector('.images-container');
imagesContainerEl.addEventListener('click', function(event) {
var element = event.target;
if (element.hasAttribute('data-toggleable')) {
element.classList.toggle('thumb-color');
}
});
The same code can be extended to support mouseover and mouseout. Check fiddle2. One function to rule them all and in the darkness bind them..
var imagesContainerEl = document.querySelector('.images-container');
imagesContainerEl.addEventListener('mouseover', onToggleImage);
imagesContainerEl.addEventListener('mouseout', onToggleImage);
function onToggleImage(event) {
var element = event.target;
if (element.hasAttribute('data-toggleable')) {
element.classList.toggle('thumb-color');
}
}
Also updated fiddle which shows how to make image grayscale/color

Is what you refer to in your question as
onClick="colorFunction(image1)"
an inline javascript event listener?
If so, try replacing it with:
onClick="colorFunction(this)"
and rewrite colorFunction() as:
function colorFunction(image) {
image.classList.toggle('thumb-color');
}

Click event not registering on div element (jQuery/HTML/CSS)

This is my game: (i can't post images yet so I have to explain with words)
This is a Connect 4 game.
Imagine 7 div columns.
The 7 columns have 6 div chip objects stacked in each column element.
(7x6 grid with 42 chips)
I put each chip (each black circle) as a div object prepended into each column container.
that is... each .columncontainer div has nested under it a bunch of .chip div elements. (they're the chips/circles)
What I want:
I want to be able to click a specific chip object (they're div's.. the black circles) and I want ONLY that one to turn full black. (default opacity I set to 0.5)
This is the code I have:
$(document).ready(function colorSelectionListener(){
$(".columncontainer").children().click(function() {
window.alert("clicked!");
$(this).css("opacity",1);
});
What's actually happening: When I click on ANY of the chip objects... NOTHING happens. I can't click the chips at all.
What I can do: To test if I can click something I made the alert "clicked!" In this way I am able to click the columncontainers. I am also able to retrieve the index of the column div inside it when I print out the index of 'this', like so:
window.alert($(this).index());
instead of the 'clicked!' message. It gives me 6...which doesn't make sense... because 6 is the last element inside columncontainer which is .column. (0-5 elements must be the chips after I prepend them right?)
What I tried: I tried making the .click with the chip objects themselves. (the class attached to every chip object is '.chip') Did not work. (Click was not registering... but I think that's another problem)
Can someone enlighten me?
EDIT 1:
Mini Recreation of Problem
https://jsfiddle.net/9z916z2u/65/
If anyone could help me I would really really appreciate it! I'm having so much fun coding this right now but this is annoying :/ I learnt jQuery/Javascript around 3 days ago, so I'm not that good. (I have coded in Java/Python before though)

Try this:
$('.columncontainer .cheap').click(function(){
$(this).css('opacity', 1)
})
Or, if you want to add .cheap blocks dynamically, you can use this variant:
$('.columncontainer').on('click', '.cheap', function(){
$(this).css('opacity', 1)
})

$(document).ready(function(){
$(".columncontainer > childElement").click(function() {
window.alert("clicked!");
$(this).css("opacity",1);
}
});
replace child element with d tag or the class of the childred of .columncontainer

Posted code in JSFiddle needs some adjustments to work. I've modified the event subscription to match late binding (according to Anatoliy Arkhipov).
$('.columncontainer').on('click', '.cheap', function(){
Instead of
$('.cheap').on('click', function(){
And removed position: relative for the .column class. Here is how the code looks now and it works in Chrome and FF.
However, I consider the answer to be not consistent (why does position: relative prevented binding?) and maybe masters of css can explain that.

Hide next Div with class name being used multiple times?

I'm getting myself really confused trying to hide the next Div with a class of .video on a page. I'm trying to have it so a later div on the page with the same class isn't effected by an input button element and only the next div with the class of ".video" after the button, if that makes sense.
I currently have it so all the div's are being effected, I've tried to use .next and .find, but for the life of me, I can't get it to work, I've tried googling around for a solution, but all seem to be not quite exactly what I need, perhaps I google'd the wrong thing, I'm not sure, but hopefully someone can provide some form of answer for me here so my mind can finally be at ease!
So this is the page currently
As you can see, the button hides/shows the elemnt as it should... but it effects the later element also.
I'm not really sure how to go about writing a script usign jQuery so the later one isn't effected... I've rattled my brain, but perhaps it's so late at night (or morning, rather!) that I just can't comprehend it in my drowzy state...
Hopefully one of you will be able to tell me what to do.
The script I'm currently using can also be found here
I appreciate any help, thanks.

try with this:
$(document).ready(function(){
$('.showhide').click(function(){
$(this).parent().next('.video').toggle();
//------^^^^^^^^^^^^^------------------------added to find the video of the parent's next
if($('.video').is(':visible')){
$('.showhide').attr('value','Hide Video');;
} else {
$('.showhide').attr('value','Show Video');;
}
});
});
i used your html in the fiddle,
see the fiddle: http://jsfiddle.net/8h7hP/

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