Develop Reference

How to add a setTimeout() to a query selector

I have a JS script
<script>
document.querySelectorAll('.stylebutton').forEach(function(e) {
e.addEventListener('click', function() {
this.style.backgroundColor = 'black';
})
});
</script>
I want to wait 10 seconds before running. I have tried
<script>
document.querySelectorAll('.stylebutton').forEach(function(e) {
e.addEventListener('click', setTimeout(function() {
this.style.backgroundColor = 'black';
}),10000)
});
</script>
But I get a console error of can not define this

setTimeout should be invoked inside the callback.
document.querySelectorAll('.stylebutton').forEach(function(e) {
e.addEventListener('click', function() {
setTimeout(()=>this.style.backgroundColor = 'black', 10000);
})
});

How to change css display from visible to not visible after a certain time using javascript

I want to set a DOM objects css display property to 'block' for 2 seconds and then have it set back to 'none' after the 2 seconds. How can this be done in just javascript? I am really new to this so don't really get jquery just yet.
I tried
document.querySelector(".one-rolled-popup").style.display = "block";
and then set it to
document.querySelector(".one-rolled-popup").style.display = "none";
after some other operations but this just hides it completely

use setTimeout. It will execute a method after X milliseconds. Such in your case, you will display the block & then set it back to no-display after 2 seconds.
method () {
// display it
document.querySelector(".one-rolled-popup").style.display = "block";
// hide it after 2 seconds
setTimeout(() => {
document.querySelector(".one-rolled-popup").style.display = "none",
2000);
}

Try this function
setTimeout(function(){
if (document.querySelector(".one-rolled-popup").style.display == "block";) {
document.querySelector(".one-rolled-popup").style.display= "none";
} else {
document.querySelector(".one-rolled-popup").style.display= "none";
}
}, 3000);

You can do the following using setTimeout. I suppose that by default the div is visible so I don't have to show it.
setTimeout(
function() {
document.querySelector(".one-rolled-popup").style.display = "none";
}, 2000);
<div class="one-rolled-popup">Testing</div>
But if it's hidden by default you could do this instead (click on the screen in the snippet to see the effect) :
function showAndHide() {
document.querySelector(".one-rolled-popup").style.display = "block";
setTimeout(
function() {
document.querySelector(".one-rolled-popup").style.display = "none";
}, 2000);
}
window.onclick = function() {
showAndHide();
}
.one-rolled-popup {
display: none;
}
<div class="one-rolled-popup">Testing</div>

How to change color of paragraph each second with JS?

I'm trying to change the color of a paragraph every second. I'm using the following function:
var ChangeColorGreen = function(){ $('#contact-title p').css('color', '#5fc091'); return true; }
var ChangeColorBlack = function(){ $('#contact-title p').css('color', '#000'); return true; }
setTimeout(function() {
ChangeColorGreen();
setInterval(function() {
ChangeColorBlack();
}, 2000);
}, 2000);
This is my HTML:
<div id="contact-title">
<p>Coming Soon</p>
</div>
But single-color changes paragraph once. No color changes again.

You can add 2 classes black & green and toggle between them every second using setInterval function and JQuery toggleClass function.
setInterval(function() {
$('#contact-title p').toggleClass('black green')
}, 1000);
.black{
color: #000;
}
.green{
color: #5fc091;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contact-title">
<p>Coming Soon</p>
</div>
Hope this helps.

You can set 2 intervals, each firing every 2 seconds but delay the 2nd one by 1 second.
setInterval(function() {
ChangeColorGreen();
}, 2000);
setTimeout(function() {
setInterval(function() {
ChangeColorBlack();
}, 2000);
}, 1000);
Better still you can set 1 interval but use a flag, or some other way to determine which color should be next.
var nextColor = "green";
setInterval(function() {
if (nextColor == "green") {
ChangeColorGreen();
nextColor = "black";
} else {
ChangeColorBlack();
nextColor = "green";
}
}, 1000);

You can create a unique function, and create a flag to change it to one color or another:
function changeColor(t) {
document.querySelector('#contact-title > p').style.color = t ? '#000' : '#5fc091';
setTimeout(function() {
changeColor(!t);
}, 2000);
}
changeColor(true);
<div id="contact-title">
<p>Coming Soon</p>
</div>

use a single function and a flag variable and have the following:
var isGreen = false;
function toggleColor(){
if(isGreen){isGreen = false; ChangeColorBlack();}
else{isGreen = true; ChangeColorGreen();}
}
and call it via a setInterval as such
setInterval(function() {
toggleColor();
}, 2000);

Javascript blinking with setTimeouts

Helllo i am getting problem with blinking every 0.5 seconds. I start my code with #blink display= "inline" but it always stays inline. When starting my code, i call startBlinking.
function startBlinking() {
setInterval(function () {
blink();
}, 1000);
}
function blink() {
setTimeout(function () {
document.getElementById('blink').style.display = "none";
}, 500);
setTimeout(function () {
document.getElementById('blink').style.display = "inline";
}, 500);
}
Can you help me? Thanks.

The problem with your attemt is that you're setting the same timeout length for both hiding and showing the element, meaning it will hide and show again at the same time! Remove one and it should work:
function startBlinking() {
setInterval(function () {
blink();
}, 1000);
}
function blink() {
// note no timeout for the hiding part
document.getElementById('blink').style.display = "none";
setTimeout(function () {
document.getElementById('blink').style.display = "inline";
}, 500);
}
startBlinking();
<div id="blink">blink</div>
<p>some text following</p>
As you can tell, this causes the following content to jump. We are also fetching the element every time we're hiding or showing it. Better to swap to using visibility and make the function a bit more flexible:
function blink(element, time) {
// using visibility: hidden; instead of display: none;
// allows the element to keep its rendering space
element.style.visibility = "hidden";
setTimeout(function () {
element.style.visibility = "visible";
}, time);
setTimeout(function () {
blink(element, time); // recurse
}, time * 2);
}
// query the DOM for element once instead of every iteration
blink(document.getElementById("blink"), 500);
<div id="blink">blink</div>
<p>following content stays put</p>
You might also want to be able to stop the blinking at some point
function blink(element, time) {
function loop(){
element.style.visibility = "hidden";
setTimeout(function () {
element.style.visibility = "visible";
}, time);
timer = setTimeout(function () {
loop();
}, time * 2);
cleared = false;
}
var timer, cleared = true;
// expose methods
return {
start: function() {
if (cleared) loop();
},
stop: function() {
clearTimeout(timer);
cleared = true;
}
};
}
var blinking = blink(document.getElementById("blink"), 500);
document.getElementById("start").addEventListener("click", function(){
blinking.start();
});
document.getElementById("stop").addEventListener("click", function(){
blinking.stop();
});
<div id="blink">blink div</div>
<button id="start">start blinking</button><br />
<button id="stop">stop blinking</button>

you can make it simple by toggling a class
.hide{
display:none;
}
setInterval(function () {
$('.blink').toggleClass('hide')
}, 500);
JS Fiddle

Just call it once, setTimeout() is ripping it out of the thread so it gets set right back to inline.
function blink() {
setTimeout(function () {
if (document.getElementById('blink').style.display === 'inline') {
document.getElementById('blink').style.display = "none";
} else {
document.getElementById('blink').style.display = "inline";
}
}, 500);
}

you have messed up the event que of javascript, why dont you try this
function startBlinking() {
initial = 'inline';
index = 0;
setInterval(function () {
if(index==2){
initial = (initial=='none')?'block':'none';
document.getElementById('blink').style.display = initial;
index=0;
}
index++;
}, 1000);
}

For the jQuery fans:
you can use the 'pulsate' effect
http://jqueryui.com/effect/
This may or may not achieve the exact blinking you need but it's a lot simpler!

Can a body tag hold multiply onload="setInterval()"?

Can a body tag hold two set intervals? or have 2 functions use the same interval?
ex:
<body onload="setInterval(function1, 500); setInterval(function2, 1000);">
<body onload="setInterval(function1, function2, 500");>

You can create a function that calls setInterval() twice with the different functions and call it on the body.onload().
And i dont think that 2 functions can have the same interval unless you wrap them up in one or call them inline like this:
<body onload="setInterval(function(){ function1(); function2();}, 500);">

Your first example would be fine:
window.onload = function() {
setInterval(function1, 500);
setInterval(function2, 1000);
}
function function1() {
console.log("function1");
}
function function2() {
console.log("function2");
}
See an example of the above code working here.

Simply use jQuery and register an event handler (in a <script type="text/javascript"> block).
In case all you need is the DOM tree being available:
$(document).ready(function() {
setInterval(function1, 500);
setInterval(function2, 1000);
});
otherwise (if you need all images being loaded etc):
$(window).load(function() {
setInterval(function1, 500);
setInterval(function2, 1000);
});

Instantiate as many onloads as you need without the collisions.
<SCRIPT>
// Class Definition
OnLoad = function(taskFunction,miliseconds) {
var context = this;
context.cnt = 0;
context.id = null;
context.doTask=taskFunction;
context.interval = function() {
if(document.readyState == "complete"){
try{ context.stop();} catch(e){ throw new Error("stop error: " + context.id); }
try{ context.doTask();} catch(e){ throw new Error("load error: " + context.id); }
}
};
context.start = function(timing) {
if(context.id && context.id!=null)
context.stop();
context.cnt=0;
context.id=setInterval(context.interval,timing);
};
context.stop = function() {
var _id = context.id;
clearInterval(context.id);
context.id=null;
};
context.start(miliseconds ? miliseconds : 100);
};
// Example Onloads
new OnLoad(function(){
alert("onload 1");
}); // uses default timing of 100 miliseconds
new OnLoad(function(){
alert("onload 2");
},200);
new OnLoad(function(){
alert("onload 3");
},300);
</SCRIPT>

Try This Cod it's Easy.
you can run this here and TEST it.
window.onload = function() {
function foo() {
Load_Note();
}
setInterval(foo, 3600);}
function Load_Note() {console.log("api loded")}