We Keep Coding

Hide button when click, start timer, download automatically when countdown finished

I'm new to coding. I am using image as my button. I want to hide the button when click and timer to start. When timer finish, i want a link to open automatically. (One more issue I've described at the end)
here is HTML and JAVASCRIPT that i'm using right now
<div id="download_button">
<a href="https://www.google.com">
<img src="https://1.bp.blogspot.com/-cel0yjs0H4A/X1tGU7oDpyI/AAAAAAAAATk/zw9Qa7YUnT4KOe8exOaxx-LJlFFofhjMACLcBGAsYHQ/s150/pdf-download-link.png" /></a>
</div>
<center>
<b>
<span style="font-size: 30px;">
<span id="countdown"></span>
</span>
</b>
</center>
and JAVASCRIPT
<script type="application/javascript">
document.getElementById("download_button").addEventListener("click", function(){
var timeleft = 5;
var downloadTimer = setInterval(function function1(){
document.getElementById("countdown").innerHTML = "Please wait "+ timeleft + " seconds";
timeleft -= 1;
if(timeleft <= 0){
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "downloading..."
}
}, 1000);
console.log(countdown);
});
And there is one more issue that i want to fix.
When 2 seconds left, "downloading..." appears. I want it to be appear when 1 second left instead of 2 seconds.
Thank you

As a small hint, please describe what does and what doesn't work with your attempt.
Anyway, your countdown probably doesn't work, so let's look into that.
The first issue is that upon clicking the link, your browser immediately follows it, but you want a countdown. We thus have to prevent this from happening. The preventDefault() method of Event might help you with that.
Your event listener would then start out like this:
document.getElementById("download_button").addEventListener("click", function(event){
event.preventDefault()
Now we need to hide the image. This can be done by setting it's display property to none, which might look like this:
document.querySelector('#download_button a img').style.display = "none";
After the countdown finishes, you need a way to actually trigger the download.
We could simulate a click by using the below code, but that would just create an infinite loop...
document.querySelector('#download_button a').click();
It is in fact much easier to directly trigger a navigate from JS:
window.location.href = document.querySelector('#download_button a').href;
Here we used querySelector to select the right element and edit it. It's very versatile, but if your button moves, you might have to change the selector. Using an id would be more stable.
Now, your last problem is that the downloading... phase is triggered too soon.
This is a typical problem of ordering statements. In your code, you decrease the value of timeleft before checking if it's 0. If you put that line all the way at the end, your problem will be solved.
I made a JSFiddle to show you how these things might work together.
Finally, I would like to remark that using things like <center> and <b> is discouraged (it should be done in CSS). Best of luck with your further learning!

A few ideas.
There is a delay starting the countdown. Solution: Add a countdown message above the setInterval
To fix the DL starting too early, move the timeleft - 1 above the next message
To prevent the a tag default behavior, add e.preventDefault() (which requires that you pass the e into the function)
Handy trick: use $ to replace all the document.getElementBy queries (note: this is not jQuery!)
const $ = document.querySelector.bind(document);
var timeleft = 5;
$("#download_button").addEventListener("click", function(e){
e.preventDefault(); //prevent the default a navigation behavior
$("#download_button").style.display = 'none';
$("#countdown").innerHTML = "Please wait "+ timeleft + " seconds"; //for quick start
var downloadTimer = setInterval(function function1(){
timeleft -= 1; //moved this line up 1 to fix timing
$("#countdown").innerHTML = "Please wait "+ timeleft + " seconds";
if(timeleft <= 0){
clearInterval(downloadTimer);
$("#countdown").innerHTML = "downloading...";
let dlRef = $("#download_button a").href;
window.location.href = dlRef;
}
}, 1000);
});
<style>
#countdown{font-size:30px;}
</style>
<div id="download_button">
<img src="https://1.bp.blogspot.com/-cel0yjs0H4A/X1tGU7oDpyI/AAAAAAAAATk/zw9Qa7YUnT4KOe8exOaxx-LJlFFofhjMACLcBGAsYHQ/s150/pdf-download-link.png" />
</div>
<div id="countdown"></div>
Also, try not to inline your styles. Inline styles look like this:
<span style="color:red">This is red</span>
Either use a style tag, or an external file for your styles:
<span class="fgRed">This is red</span>
<style>
.fgRed{color: red;}
</style>

setInterval(function, timer) become to infinite loop when click Enter key

I have my set interval function and its working fine, but sometimes after setintervel trigged and I pressed Enter key some 4 to 5 times and my interval become infinite. can any one help me on this.
Thanks in advance.
code:
/one of the js file/
var intervaltime=setInterval(functionname(), 1000);
functionname()
{
if(pageloaded== "true"){ //pageloaded is coming from one JSP when I click that page.jsp
clearInterval(intervaltime);
}
}
**//page.jps**
<input type="hidden" value="true" id="pageloaded" name="pageloaded" />
page.jsp:
init method I added the hidden variable and to set the value of

First of all, the setInterval Method needs a function as first parameter, not "function()" .
For example :
setInterval(function() {
console.log("hello");
}, 1000);
You can also use the following syntaxe to declare your function ouside the timer :
function yourfunc() {
// ...
}
setInterval(yourfunc, 1000);
Also, I think that what you are trying to do is to stop something when your input is clicked or when your page is loaded. If so, the timer is not a good way to do that. You should use an event listener instead.
I hope it helped

click a button programmatically in a website

Well i want to build a bot thats clicks a button after amount of time like every 5 hours,
how can i do that?
i prefer in PHP , but if there any other language that you know , i know also C#,Java,JS..
any suggestions to start, i just never did it before and i want to do learn how to do it very much, i have been searching, didn't find nothing.
Thank a lot!.
I already tried in chrome what the button send , and it send javascripts:void(0) something like and location.href = /Blah/blaahh.php.

So basically your question is programmatically click a button and trigger it in a certain time interval. So what came up to my mind was the solution below:
<script>
setInterval(function(){
$('#button').trigger('click');
}, 3000);
</sctipt>
The code above will trigger and the button will be triggered as clicked and it will take place for every amount of time. After the button is being clicked, try to add some function to handle the event after the button is technically being clicked.
Hope it helps =)

You must use setTimeout on every n < 10 seconds to prevent the browser from sleeping, setInterval with hours not a good idea.
In my opinion, The best two ways to implement something like that is:
Node.js
setTimeout every 10 seconds and loop on the same function, and each time check if the last click was 5 hours ago.
Javascript Example setTimeout:
var CLICK_EVERY_TIME = 10 * 1000; // i choosed to click every 10 sec
var clickCount = 0;
var lastClick = 0;
var loops = 0;
$(window).ready(function(){
// on page load start you auto clicker
runner();
});
function performClick(){
clickCount++;
$('#clickCount').html("clicks: "+clickCount);
// save last click time
lastClick = new Date().getTime();
}
function runner(){
loops++;
var currentTime = new Date().getTime();
if(currentTime - Number(lastClick) > CLICK_EVERY_TIME){
performClick();
}
$('#loops').html("runner: "+loops+" loops");
setTimeout(runner, 1000); // every 1 seconds
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clickCount">clicks: 0</div>
<div id="loops">runner: 0 loops</div>
Node.js:
You have to use jsdom to simulate a browser, and perform your clicks.
Note: In Node.js you can use setInterval with hours as mush as you want, because the Node.js on standalone process.

Can you please explain me the following javascript?

I've been using this code to buy a phone in a flash sale and now that I'm done with with it I want to understand what the following code actually does:
setInterval(function (){
jQuery('.btn').trigger('click');
console.log('Working...');
}, 10);

This code is setting interval of the function using setInterval meaning that the function will be called after every 10 millisecond. The function in it is triggering the click of the element having class btn and then sending data to the log ("WORKING");
setInterval(function(){ jQuery('.btn').trigger('click'); console.log('Working...'); },10);
Hope this helps you

It enforce click on element with .btn class after 10 miliseconds.

multiple countdowns on same page with jquery

i'm having a little problem with jquery/javascript countdown and i'm hoping you can help me.
so, i have timer function, which has a one parameter, called selector (jquery selector) ..
function timer(selector) {
self = $(selector);
var sec = parseInt(self.find('span.timeout').text());
var interval = setInterval(function() {
sec--;
if (sec >= 0) {
self.find('span.timeout').text(sec);
} else {
setInterval(interval);
}
}, 1000);
}
in, html i have something like this.
<div class="element" id="el1"><span class="timeout">10</span></div>
<div class="element" id="el2"><span class="timeout">10</span></div>
multiple elements with same class and different id's
and the usage of the function is like this:
$("body").on('click', '.element', function() {
timer(this);
});
on the first click it works just fine, timer counts down.
but when i click on the second div with same class, first counter stops and the second goes from the previous second.
so, how can i do multiple countdowns on same page with js/jquery, so i could click on both elements and both timers work fine?
demo: http://jsfiddle.net/zKTkj/

You forgot to declare self with var. As a result, self became a global variable. You were overwriting this global ("shared") variable when the second timer was being created. So, both timers were from then on, at the same time, ouputting to the second element, causing glitches.
You probably meant clearInterval(interval).
http://jsfiddle.net/zKTkj/1/