Develop Reference

Is there a way of making a javascript loop to repeatedly press a button?

I am very new to javascript so bear with me if I make mistakes, I am designing a website that allows the user to change the background with a button press, this all works very well and it's great but I want the images to be able to cycle with a time delay. In essence, I want the user to be able to click a button to change the background but I also want a javascript loop running in the background clicking the same button after a set period of time, is this possible?
The code to change the background is as follows:
$(document).ready(function () {
var i = 0;
$("#n").click(function () {
i++;
if (i > 16) { i = 1; };
$('body').css('background-image', 'url(img/' + i + '.jpg)');
});
$("#p").click(function () {
i--;
if (i <= 0) { i = 16; };
$('body').css('background-image', 'url(img/' + i + '.jpg)');
});
});
And the code for the buttons used is:
<button id="n" class="btn">Nxt</button>
<button id="p" class="btn">Prv</button>

You can use setInterval for looping -
setInterval(() => {
console.log('this will repeat every 500 milliseconds');
}, 500);

My recommendation would be not to simulate a click but just call the same function that the click does.
So let's make a function that can be called:
function increment() {
i++;
if ( i > 16 ){ i = 1; };
$('body').css('background-image', 'url(img/' + i + '.jpg)');
}
Then we can use that for the regular click that you already have:
$("#n").click(increment)
And we can also define a repeating call to this function:
setInterval(increment, 1000)
setInterval is pretty neat for non time sensitive tasks like this. Look at the link provided to see how it works, how to cancel it if you want to stop it...
#Ritesh Ganjewala wrote a nice little snippet in her answer that will show you what setInterval does.
#trincot also has an answer that, while a little more complicated to understand, allows you to have less repeating code by using the same function to increment and decrement your counter. Which is something you should strive for when programming something. This is called the DRY principle.

By design, you can't create user inputs with JavaScript. This makes sense if you think about it, certain browser features like requesting permissions can only be done if the user performs an action. You wouldn't want sites agreeing to grant permissions without your input.
So in your case, the best thing to do would be to have the event listener (for user input) and the setTimeout or requestAnimationFrame (for automatic cycling) call the same function.
document.getElementById('n').addEventListener('click', nextColor);
document.getElementById('p').addEventListener('click', prevColor);
var i = 0;
function nextColor() {
i++;
if ( i > 16 ){ i = 1; };
document.body.style.backgroundImage = `url(img/${i}.jpg)`;
}
function prevColor() {
i--;
if ( i <= 0 ){ i = 16; };
document.body.style.backgroundImage = `url(img/${i}.jpg)`;
}
setInterval(nextColor, 5000);

Don't attempt to send a click event to a button. Instead isolate the function that such a click executes, and then use setTimeout to execute that function. You may also want to reset an ongoing timeout when the user clicks again.
Here is how that could look:
$(document).ready(function(){
var i = 0;
var delay = 1000; // number of milliseconds
var timer = setTimeout(next, delay); // <-- set the time out
function next(step=1) { // optional argument that should be 1 or -1
i = (i + 16 + step) % 16; // Use modulo arithmetic to rotate in the range [0..15]
$('body').css('background-image', 'url(img/' + (i+1) + '.jpg)');
clearTimeout(timer); // interrupt the ongoing time out ...
timer = setTimeout(next, delay); // <-- and start it again
}
$("#n").click(next);
$("#p").click(next.bind(null, -1)); // bind the argument to be -1
});

try this setInterval, this will allow you to run a function with a fixed time delay.
function doThis() {
console.log('2 seconds over ...');
}
var xyz = setInterval(doThis, 2000);
and if you need to stop this,
clearInterval(xyz);

Yes, It is possible...
On click of the button on which you are changing the background color you can also initiate a timeout which will call a function after the specified time period (callback function) which in your case will change the image.and setinterval will do the same repeatedly after a specified interval.
$(document).ready(function(){
var i = 0;
function increment() {
i++;
if ( i > 16 ){ i = 1; };
$('body').css('background-image', 'url(img/' + i + '.jpg)');
}
function decrement() {
i--;
if ( i <= 0 ){ i = 16; };
$('body').css('background-image', 'url(img/' + i + '.jpg)');
}
$("#p").click(function(){
increment();
setInterval(increment, 1000);
}
$("#n").click(function(){
decrement();
setInterval(decrement, 1000);
}
}

Ok so ive figured something out from a couple of people who answered, what ive got now is this:
<script>
setInterval(() => {
$("#n").click();
}, 7000);
</script>
This has the effect of clicking the button i want every 7 seconds and its perfect, thanks for everyones help!

Javascript timer - How do I prevent the timer from speeding up each time .deck is clicked?

I am building a memory card game. the class .deck represents a deck of cards. Each time I click a card the timer speeds up. How do I prevent the timer from speeding up?
function startTimer() {
$(".deck").on("click", function () {
nowTime = setInterval(function () {
$timer.text(`${second}`)
second = second + 1
}, 1000);
});
}

You start multiple intervals, one each click. You probably should just start one. If you want to start it for the first card that is clicked:
function startTimer() {
// Maybe remove old timer? Should happen somewhere in your code.
// Possibly "stopTimer" if you have such a function.
clearInterval(nowTime);
let started = false;
$(".deck").on("click", function () {
if (started) return;
nowTime = setInterval(function () {
$timer.text(`${second}`)
second = second + 1
}, 1000);
started = true;
});
}
That code should have some more cleanup, though. Otherwise you accumulate a lot of dead event listeners.
(Furthermore, i believe that jQuery should never be used.)

You need to stop the previous timer before starting a new one because, if you don't, you wind up with multiple timer callback functions all executing one immediately after the other, which gives the illusion that your single timer is speeding up.
function startTimer() {
$(".deck").on("click", function () {
clearInterval(nowTime); // Stop previous timer
nowTime = setInterval(function () {
$timer.text(`${second}`);
second = second + 1;
}, 1000);
});
}
Another way to deal with this is to only allow the click event callback to run the very first time the button is clicked:
function startTimer() {
$(".deck").on("click", timer);
function timer() {
nowTime = setInterval(function () {
$timer.text(`${second}`);
second = second + 1;
}, 1000);
$(".deck").off("click", timer); // Remove the click event handler
}
}

endless while loop after mousemove

I am going crazy here.
I want to show an element on mouse move, and hide it 10 sec after last move of the mouse.
I wrote this:
document.addEventListener("DOMContentLoaded", function(event) {
var time = 0;
document.addEventListener("mousemove", function(event) {
console.log('$');
document.getElementsByClassName("mybar")[0].style.visibility = 'visible';
time = 0;
while (time < 11) {
setTimeout(function() {
time++
}, 1000);
console.log(time, time == 10);
if (time == 10) {
document.getElementsByClassName("mybar")[0].style.visibility = 'hidden';
}
}
});
});
<div class='mybar'>
<h1> TESTING </h1>
</div>
Why does it end up in an endless loop?
Why doesn't it exit on condition? why does the if never gets the 'true' parameter?
Notice : don't run it this way... it will kill your tab.

First, you don't need to wait for DOMContentLoaded to add an event listener to document, since if you did, you couldn't add DOMContentLoaded in the first place.
The infinite loop is because setTimeout doesn't pause the script. It schedules its callback for the time you provide, and irrespective of that time, the callbacks will not run until the current running code in the thread completes, which never happens because you don't increment the time variable.
So the loop never ends, and so the thread is never made available, so your callbacks never can run, so time can never be incremented.
Lastly, starting a setTimeout inside an event handler that shares a local variable and executes very rapidly on an event like mousemove is prone to give unexpected results. For example, in your code, every time the handler runs, it'll reset time to 0, which doesn't seem to be what you'd want.
A solution would be to ditch the loop, schedule the visibility for 10 seconds, and prevent the main part of the code in the handler from running in the meantime by using a boolean variable.
var timer = null;
document.addEventListener("mousemove", function(event) {
var myBar = document.querySelector(".mybar");
if (!myBar) {
return; // there's no mybar element
}
if (timer == null) {
myBar.style.visibility = 'visible';
} else {
clearTimeout(timer); // clear the currently running timer
}
// set to hidden in 10 seconds
timer = setTimeout(function() {
myBar.style.visibility = 'hidden';
timer = null; // clear the timer
}, 10000);
});
I also switched to querySelector instead of getElementsByClassName because it's shorter and cleaner. And I used a variable to make sure the element is found before setting the style.

You need a flag out of the mousemove scope that tells your listener that you've already ran.
if(running) return;
running = true;
In context:
document.addEventListener("DOMContentLoaded", function(event) {
var time = 0;
var running = false;
document.addEventListener("mousemove", function(event) {
console.log('$');
if(running) return;
running = true;
document.getElementsByClassName("mybar")[0].style.visibility = 'visible';
time = 0;
while (time < 11) {
setTimeout(function() {
time++
}, 1000);
console.log(time, time == 10);
if (time == 10) {
document.getElementsByClassName("mybar")[0].style.visibility = 'hidden';
}
}
});
});

Here's a way to do it with regular JavaScript. If your browser isnt ES6 compliant, you can replace the arrow functions with regular function expressions. The example hides the text after 2 seconds instead of 10, just so you can see it work without having to waste 8 extra seconds.
//hide by default
document.getElementById('myBar').style.display = 'none';
var timer = null;
var hideDivTimer = () => {
timer = setTimeout(() => {
document.getElementById('myBar').style.display = 'none';
}, 2000);
};
document.addEventListener('mousemove', () => {
clearTimeout(timer);
document.getElementById('myBar').style.display = 'inline';
hideDivTimer();
});
<body>
<div id='myBar'>
<h1> TESTING </h1>
</div>
</body>

How can I depend on the interval that I just cleared in jquery?

It's a follow up to this question - https://stackoverflow.com/a/33430608/3766930
Basically I have a text area and when user starts typing in sth, the counter starts going down from 3 to 0. when it reaches 0 it gets disabled.
Now I want to add a feature of starting over - when user clicks the link start over, text area goes enabled again and user has 3 seconds (again) to perform the input.
I modified the jquery script:
$('#textArea').on('input propertychange', display30Seconds);
var interval;
function display30Seconds() {
var validTime = 3000;
if (!interval)
interval = setInterval(function () {
$('#counter').html(validTime / 1000);
validTime = validTime - 1000;
if (validTime < 0) {
clearInterval(interval);
alert('Time Up!');
$('#textArea').prop('disabled', true);
$('#counter').html('start over');
$('#counterIsDone').on('click', function(){
$('#textArea').prop('disabled', false);
display30Seconds();
});
}
}, 1000);
}
but I see that I cannot call the method display30Seconds(); again. Or rather I can, but the interval is not set again. How can I fix it?
Seems like I'm not entering the code inside
if (!interval)
because the interval is not visible any more after clearing it (?). So I thought about moving the var interval; into the body of the method function display30Seconds() {, but that doesn't bring the expected effect. Is there a way of fixing it?
Here is my updated fiddle: http://jsfiddle.net/jf4ea4nx/3/

Set interval=null after the clearInterval() call.
What seems to confuse you is the semantics of clearInterval(interval). As Patrick Evans points out in his comment, it will not set interval to a value that evaluates to false in a condition.
To make it completely clear you could use a boolean variable such as countdownRunning in addition to the interval variable to keep track of whether the countdown is active or not.

Try this:
$('#textArea').on('input propertychange', display30Seconds);
var interval=false;
function display30Seconds() {
var validTime = 3000;
if (!interval)
interval = setInterval(function () {
$('#counter').html(validTime / 1000);
validTime = validTime - 1000;
if (validTime < 0) {
clearInterval(interval);
alert('Time Up!');
$('#textArea').prop('disabled', true);
$('#counter').html('start over');
$(document).on('click','#counterIsDone', function(){
$('#textArea').prop('disabled', false);
display30Seconds();
});
interval=false;
}
}, 1000);
}

You can improve your code by using a conditional recursive call to to your iterative function instead - each call has a one second delay, which makes it slightly more intuitive to use (think of each call as one tick):
var seconds = 3;
$('#textArea').on('input propertychange', setTimeout(timeout.bind(null, seconds), 1000));
function timeout (iterations) {
$('#counter').html(iterations);
if (iterations === 0) {
alert('Time Up!');
$('#textArea').prop('disabled', true);
$('#counter').html('start over');
$('#counterIsDone').on('click', function(){
$('#textArea').prop('disabled', false);
timeout(seconds);
});
}
else {
setTimeout(timeout.bind(null, --iterations), 1000);
}
}
The bind function simply binds the arguments of the bind function to the arguments of the timeout call - the first argument to the bind function declares its this scope; but don't worry about that too much.
You can modify the duration of the timer by changing the seconds var. Hope this helps :)

Hide download link for 10 seconds? js

hey, how can I have my download link hidden, and make a count down type thing. Maybe have it count down from 10 and once it's done that have the download link appear, it would be best to do it in js right?
does anyone know how to do this? :D
Thanks

Complete example:
<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 10;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>

You can use setInterval for this. setInterval behaves like a timer, where you can run a certain function periodically. Something like this should do the work(untested):
$(".link").hide();
var iteration = 0;
var timer = setInterval(function() {
if(iteration++ >= 10) {
clearTimeout(timer);
$(".link").show();
$(".counter").hide();
}
$(".counter").text(10 - iteration);
}, 1000);
This will initially hide the download link and run a function every second which counts down from 10. When we reaced ten, we hide the counter and show the link. ClearTimeout is used so that we don't count after we reached ten. Easy as dell.
Edit: As mentioned in the comments, this function is using jQuery to find the elements.

Take a look at the setTimeout function. You can do something like:
function displayLink() {
document.getElementById('link_id').style.display = 'block';
}
setTimeout(displayLink, 10000);

var WAIT_FOR_SECONDS = 10;
var DOWNLOAD_BUTTON_ID = "btnDownload";
if (document.body.addEventListener) {
document.body.addEventListener("load", displayDownloadButton, false);
} else {
document.body.onload = displayDownloadButton;
}
function displayDownloadButton(event) {
setTimeout(function() {
_e(DOWNLOAD_BUTTON_ID).style.display = "";
}, WAIT_FOR_SECONDS*1000);
}
function _e(id) {
return document.getElementById(id);
}