Add a delay to JavaScript function [duplicate] - javascript

This question already has answers here:
How to create javascript delay function [duplicate]
(3 answers)
Closed 8 years ago.
I'm trying to understand where to add code to delay the toggle of my div by 0.5 seconds. I am a beginner with JavaScript/jQuery.
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//it is tied to this if it can help
<a onclick="toggle_visibility('section1_1_content');toggle_visibility('note1_1');"> <div id="help_tiem_section1_1" onclick="chngimg1()" onmouseover="this.style.cursor='pointer'">
<p1>TEST</p1><img src="down.png" height="10px" width="15px" id="imgplus1"/>
</div></a>
This works. However, I'd like to change it so that when it changes back to display none it does not delay.

use setTimeout():
setTimeout(yourFunction, 500)

You should use setTimeout
function toggle_visibility(id) {
setTimeout(function() {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}, 500);
}
Update:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') {
setTimeout(function() {
e.style.display = 'none';
}, 500);
} else {
e.style.display = 'block';
}
}

Related

For some reason cannot click a button twice

this is my first ever question and would really appreciate you guys' help. I am getting this error everytime I click a button twice. Uncaught TypeError: (document.getElementById(...).style.display == "block") is not a function
This is my JS code--
document.getElementById("HTML").addEventListener("click", function(){
if (document.getElementById("CSScontent").style.display == 'block')
(document.getElementById("Imgcontent").style.display == 'block')
(document.getElementById("SVGcontent").style.display == 'block'); {
document.getElementById("CSScontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'none';
document.getElementById("HTMLcontent").style.display = 'block';
}
}
);
document.getElementById("CSS").addEventListener("click", function(){
if (document.getElementById("HTMLcontent").style.display == 'block')
(document.getElementById("Imgcontent").style.display == 'block')
(document.getElementById("SVGcontent").style.display == 'block'); {
document.getElementById("HTMLcontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'none';
document.getElementById("CSScontent").style.display = 'block';
}
}
);
document.getElementById("IMG").addEventListener("click", function(){
if (document.getElementById("HTMLcontent").style.display == 'block')
(document.getElementById("CSScontent").style.display == 'block')
(document.getElementById("SVGcontent").style.display == 'block'); {
document.getElementById("HTMLcontent").style.display = 'none';
document.getElementById("CSScontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'block';
}
}
);
document.getElementById("SVG").addEventListener("click", function(){
if (document.getElementById("HTMLcontent").style.display == 'block')
(document.getElementById("CSScontent").style.display == 'block')
(document.getElementById("Imgcontent").style.display == 'block'); {
document.getElementById("HTMLcontent").style.display = 'none';
document.getElementById("CSScontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'block';
}
}
);
end everytime I click a button twice it gives me the error. I have tried everything I could to solve this but still no progress.
Thanks!
This is because you are using another parenthesis i.e. (...) after the first one for the if clause i.e. if(...)(...)(...)
Which tries to run the first parenthesis clause (...) as a function, which is not a function but a statement
You should use binary logical operators like && || between these conditions like (...) || (...) || (...)
Also, remove the semi-colon ; before the first if brace (curly bracket {...})
So, you can try something like
// Example code for `HTML` will be the same for all others i.e. CSS, IMG, SVG
document.getElementById("HTML").addEventListener("click", function(){
if (
document.getElementById("CSScontent").style.display == 'block' ||
document.getElementById("Imgcontent").style.display == 'block' ||
document.getElementById("SVGcontent").style.display == 'block'
) {
document.getElementById("CSScontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'none';
document.getElementById("HTMLcontent").style.display = 'block';
}
});

Vanilla JS modal issue

This seems like a simple idea to me clearly I'm missing something here and any advice on what is wrong would be appreciated. I have created a simple modal that will pop up when the button is clicked. I assumed by using an If/else statement in the JS function i could just chose to set the button ti show or to disappear. I know of work arounds for this but I'm curious why this solution will not work
function openNav() {
let open = document.querySelector('#open');
open.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'block';
if (nav.style.display === 'block') {
open.style.display = 'none';
} else {
open.style.display == 'block';
}
})
}
openNav();
function closeNav() {
let close = document.querySelector('#close');
close.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'none';
if (nav.style.display === 'block') {
close.style.display = 'block';
} else {
close.style.display = 'none';
}
})
}
closeNav();
the button does work to open the modal after it is closed tho the "open" button does not re appear.
you can change it to toggle too since you should only use this function once for adding the event listener
function toggleNav() {
const open = document.querySelector('#open');
const close = document.querySelector('#close');
const nav = document.querySelector('nav');
open.addEventListener('click', () => {
nav.style.display = 'block';
close.style.display = 'block';
open.style.display = 'none';
})
close.addEventListener('click', () => {
nav.style.display = 'none';
close.style.display = 'none';
open.style.display = 'block';
})
}
toggleNav();
#close, nav {
display:none;
}
<button id="open">Open nav</button>
<button id="close">Close nav</button>
<nav>Nav</nav>
a few more errors:
if (nav.style.display === 'block') {
open.style.display = 'none';
} else {
open.style.display == 'block'; // This is a comparison
}
You are not setting the open button back to block when the nav is closed. Try this code instead:
function openNav() {
let open = document.querySelector('#open');
open.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'block';
open.style.display = 'none';
close.style.display = 'block';
/*
if (nav.style.display === 'block') {
open.style.display = 'none';
} else {
open.style.display == 'block';
}
*/
})
}
openNav();
function closeNav() {
let close = document.querySelector('#close');
close.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'none';
open.style.display = 'block';
close.style.display = 'none';
/*
if (nav.style.display === 'block') {
close.style.display = 'block';
} else {
close.style.display = 'none';
}
*/
})
}
closeNav();
I think you are assuming that the if block is monitoring the display. However, it does not, it only checks it once in the function call.

How do I assure the visibility of at least one element when randomly calling a function with javascript?

I have a function to randomly select the visibility of an html element by its id. I call the function two time on one elements, hence it may appear, that both elements are invisible. I want to avoid having none of both display. I've tried it with a separate function and also by modifying my random function.
Here is my code:
function turn_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'hidden') e.style.display = 'block';
else e.style.display = 'block';
}
function in_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'none';
}
function random_vis(id, id) {
var func = randomFrom([turn_visible, in_visible]);
(func)(id);
}
function randomFrom(array) {
return array[Math.floor(Math.random() * array.length)];
}
Here is how I try to check the visibility:
function check_visible(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if ((e1.style.display == 'hidden'), (e2.style.display == 'hidden')) {
var func = randomFrom([turn_visible(id1), in_visible(id2)]);
(func)(id1, id2);
}
}
This is how I use the function in the html markup:
<a href="#page1" onclick="random_vis('rap-1812-1');
random_vis('rap-1857-1');
check_visible('rap-1812-1','rap-1857-1')">
</a>
The below code is functioning on Chrome and Firefox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<div id="rap-1812-1" style="display : block;">This is div rap-1812-1</div>
<br>
<div id="rap-1857-1" style="display : block;">This is div rap-1857-1</div>
<br>
<a href="#page1" onclick="random_vis('rap-1812-1');
random_vis('rap-1857-1');
check_visible('rap-1812-1','rap-1857-1')">
Click Here!
</a>
</body>
<script>
function turn_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
}
function in_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
}
function random_vis(id) {
var func = randomFrom([turn_visible, in_visible]);
(func)(id);
}
function randomFrom(array) {
return array[Math.floor(Math.random() * array.length)];
}
function check_visible(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if ((e1.style.display == 'none') && (e2.style.display == 'none')) {
var toShow = Math.floor(Math.random() * 2);
turn_visible(arguments[toShow]);
}
}
</script>
</html>
var invisibleId = ""; // both are visible!
function in_visible(id) {
// Check if one is already invisible and turn on, if not the same as id
if (invisibleId != id && invisibleId !== "") {
turn_visible(invisibleId);
}
invisibleId = id;
...
}

Displaying Div's based on URL using Javascript

I’m new to Javascript and I’m having trouble displaying and hiding some divs based on url’s.
I have 4 divs that need to be shown depending on the url.
The 4 divs are:
Div 1
<body onload="callOnPageLoad1()”>
<div id="homeName" style="display:block"><h5>HOME</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/
Div 2
<body onload="callOnPageLoad2()”>
<div id="profilesName" style="display:block"><h5>PROFILES</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Profiles
Div 3
<body onload="callOnPageLoad3()”>
<div id="retailName" style="display:block"><h5>RETAIL</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Retail
Div 4
<body onload="callOnPageLoad4()”>
<div id="blogName" style="display:block"><h5>BLOG</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Blog
The JS I’m using is:
<script type="text/javascript">
function callOnPageLoad1()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
document.getElementById('homeName').style.display = 'block';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('homeName').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad2()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'block';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('profilesNamed').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad3()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Retail")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'block';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('retailName').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad4()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Blog")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'block';
}
else {
document.getElementById('blogName').style.display = 'none';
}
}
</script>
At present the only time this is working correctly is when I’m at:
http://www.fitzofdesign.com/
because Div 1 appears and the other 3 Divs are hidden.
This is not working when I’m at:
http://www.fitzofdesign.com/?category=Profiles
http://www.fitzofdesign.com/?category=Retail
http://www.fitzofdesign.com/?category=Blog
because Div 2, 3 & 4 are all incorrectly displaying for each URL.
I hope this makes sense.
Can anyone help please?
Thanks Rowan
You need to combine all those functions into something like:
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
document.getElementById('homeName').style.display = 'block';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'block';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
And you need to make sure this check is called after everything loads, so put inside something like a jquery document.ready:
$(document).ready(function() {
var url = window.location.href
// rest of the code
}
Also, you might want to change the checks from:
url == "http://www.fitzofdesign.com/?category=Profiles"
to
url.indexOf("category=Profiles") > -1
Hope that helps
Firstly hide all the divs.
On window.onLoad event, fetch the querystring value and use that to display the appropriate div.
Below is the code snippet to extract the querystring category value.
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Ok first, you don't need to put each of those in their own script tags. Keep them together.
Second, save stuff you repeat in JS as variables for performance and cleaner code:
var url = window.location.href,
fitz = "http://www.fitzofdesign.com/"
home = document.getElementById('homeName'),
profile = document.getElementById('profilesNamed'),
retail = document.getElementById('retailName').style.display,
blog = document.getElementById('blogName').style.display;
Third, you can check variables against each other:
if( url == fitz ) {
home.style.display = 'block';
profile.style.display = 'none';
retail.style.display = 'none';
blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
home.style.display = 'none';
profile.style.display = 'block';
retail.style.display = 'none';
blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
// etc.
}
Finally, you need to create an event listener that will determine when a click or some other user behavior occurs. That should trigger this function each time.
Look up addEventListener

Show specific div based on url

I need to show a particular div when a button is clicked, only if the url is on a certain members profile. If its not on a profile page show another div that will display an error message. I have written it out extra long because I'm not that great at javascript. I'm having 2 problems with the code below:
1) only the first url will show the correct div not the url after the or (||)?
2) the else code that should show the error message shows up no matter what page you're on?
Please help.
function showdiv() {
if ((window.location.href == "http://google.com/profile/AA") || (window.location.href == "http://google.com/profile/AA/?xg_source=profiles_memberList")) {
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') document.getElementById('AA').style.display = 'block';
else document.getElementById('AA').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/BB") || (window.location.href == "http://google.com/profile/BB/?xg_source=profiles_memberList")) {
document.getElementById('BB').style.display = 'block';
if (document.getElementById('BB').style.display == 'none') document.getElementById('BB').style.display = 'block';
else document.getElementById('BB').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/CC") || (window.location.href == "http://google.com/profile/CC/?xg_source=profiles_memberList")) {
document.getElementById('CC').style.display = 'block';
if (document.getElementById('CC').style.display == 'none') document.getElementById('CC').style.display = 'block';
else document.getElementById('CC').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/DD") || (window.location.href == "http://google.com/profile/DD/?xg_source=profiles_memberList")) {
document.getElementById('DD').style.display = 'block';
if (document.getElementById('DD').style.display == 'none') document.getElementById('DD').style.display = 'block';
else document.getElementById('DD').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/EE") || (window.location.href == "http://google.com/profile/EE/?xg_source=profiles_memberList")) {
document.getElementById('EE').style.display = 'block';
if (document.getElementById('EE').style.display == 'none') document.getElementById('EE').style.display = 'block';
else document.getElementById('EE').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/FF") || (window.location.href == "http://google.com/profile/FF/?xg_source=profiles_memberList")) {
document.getElementById('FF').style.display = 'block';
if (document.getElementById('FF').style.display == 'none') document.getElementById('FF').style.display = 'block';
else document.getElementById('FF').style.display = 'block';
}
else {
document.getElementById('error').style.display = 'block';
if (document.getElementById('error').style.display == 'none') document.getElementById('error').style.display = 'block';
else document.getElementById('error').style.display = 'block';
}
}
That code will be a nightmare to maintain. You might have better luck structuring it more like this:
function getId() {
var href = window.location.href;
if (href.indexOf('?') != -1) {
//remove any url parameters
href = href.substring(0, href.indexOf('?'));
}
if (href.charAt(href.length - 1) == '/') {
//check for a trailing '/', and remove it if necessary
href = href.substring(0, href.length - 1);
}
var parts = href.split("/");
return parts[parts.length - 1]; //last array element should contain the id
}
function showdiv(){
var id = getId();
var elem = document.getElementById(id);
if (elem) {
if (elem.style.display == 'none') {
elem.style.display = 'block';
}
else {
elem.style.display = 'none';
}
}
else {
if (document.getElementById('error').style.display == 'none') {
document.getElementById('error').style.display='block';
}
else {
document.getElementById('error').style.display='none';
}
}
}
You should work out the logic first.
This code makes no sense at all.
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') {
document.getElementById('AA').style.display = 'block';
}
else {
document.getElementById('AA').style.display = 'block';
}
Structurally, it is similar to this code (simplified and with comments)
var a = 'block';
// this if will never be true, because we just set a to "block"
if (a == 'none') {
a = 'block';
}
// this else will always execute and set a to "block" again.
// something that was already done in the first line.
else {
a = 'block';
}
Also try to factor our the repeating parts of your code as #aroth has nicely demonstrated.

Categories

Resources