Develop Reference

Using Onclick to call a nested function

I want to implement a basic timer program that starts a 15 second timer on start button and stops on stop button
Here is what I have done so far
JS
var timeleft = 15;
function timer(){
var downloadTimer = setInterval(function(){
if(timeleft <= 0){
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "Finished";
} else {
document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
}
timeleft -= 1;
}, 1000);
function timerstop(){
clearInterval(downloadTimer);
}
}
HTML
<div id="countdown"></div>
<button onclick="timer();">start</button>
<button onclick="timerstop();">stop</button>
The reason I had to use the nested function approach was to access the variable downloadtimer, the start button works as expected but on clicking the stop button I get the following error
Uncaught ReferenceError: timerstop is not defined
I would like to know if is this is a programming error or should I change my approach
Thanks in Advance

Move downloadTimer outside.
var timeleft = 15;
var downloadTimer;
function timer() {
downloadTimer = setInterval(function () {
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "Finished";
} else {
document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
}
timeleft -= 1;
}, 1000);
}
function timerstop() {
clearInterval(downloadTimer);
}

How to run countdown if user active on my website?

I used this code to count down when users were on my site. However it still works (countdown) when I work on another browser tab.
Please help me
<style>
#permalink{display:none}
</style>
<script>
if (document.hasFocus())
{
var timeleft = 10;
var downloadTimer = setInterval(function(){
if(timeleft <= 0){
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "Done";
document.getElementById("permalink").style.display = "block";
} else {
document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
}
timeleft -= 1;
}, 1000);
}
</script>
<div id="countdown"></div>
<div class="ebook-buttons">
<span id="download-button"><a id="permalink" href="/download/file.zip" rel="nofollow">Download</a></span>
</div>

You can use focus and blue event to identify that either user is on current tab or not. So check this solution:
<style>
#permalink{display:none}
</style>
<script>
var downloadTimer;
var timeleft = 500;
function startTimer() {
downloadTimer = setInterval(function () {
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "Done";
document.getElementById("permalink").style.display = "block";
} else {
document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
}
timeleft -= 1;
}, 1000);
}
function stoptimer() {
window.clearInterval(downloadTimer);
}
window.addEventListener('focus', startTimer);
window.addEventListener('blur', stoptimer);
</script>
<div id="countdown"></div>
<div class="ebook-buttons">
<span id="download-button"><a id="permalink" href="/download/file.zip" rel="nofollow">Download</a></span>
</div>

How do I automatically Start the timer when I reload this Page?

<p id="countdown"></p>
<div id="startButtons">
<button onclick="sample()" id="gameStart" class="gameStart">LETS GO!</button>
<script>
var timeleft = 90;
window.onload = timedText;
function sample() {
document.getElementById('paragraph').innerHTML = "<style>.paragraph(visibility:collapse);";
document.getElementById('gameStart').innerHTML = "<style>.gameStart(visibility:collapse);";
var downloadTimer = setInterval(function
function1() {
document.getElementById("countdown").innerHTML = timeleft + "&nbsp" + "seconds left";
timeleft -= 1;
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "The time has ended!";
window.open("index2.1.html");
}
}, 1000);
console.log(countdown)
}
</script>
I making this game of words and I don't really get how to start the timer when I reload the page, I want the timer to start by itself, So if I click Enter on the home page and reach this page the timer should start by itself..., and when the timer gets finished another window should open that is the 2.1 index.html
Thank you

Rather than wrapping your JavaScript loop up in a function that needs to be called on page load, just run the JavaScript directly (without placing in a function) and the page will run it as soon as it reads/loads it.
<p id="countdown">Countdown Beginning</p>
<script>
var timeleft = 90;
var downloadTimer = setInterval(function () {
document.getElementById("countdown").innerHTML = `${timeleft} seconds left`;
timeleft -= 1;
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "The time has ended!";
}
}, 1000);
</script>

Set headers after countdown timer expires

I have a countdown timer that counts from 10 down to 0. I want to set new headers after the countdown timer expires...
var timeleft = 10;
var downloadTimer = setInterval(function(){
document.getElementById("countdown").innerHTML = timeleft;
timeleft -= 1;
if(timeleft <= -2){
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "0"
}
}, 1000);
Any one knows the easiest way of achieving this?

If you mean you want to add a new element (like <h1>) to your page, then try it:
var timeleft = 10;
var downloadTimer = setInterval(function() {
document.getElementById("countdown").innerHTML = timeleft;
if (timeleft == 0) {
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "0";
// create new h1 element
var h1 = document.createElement('h1');
h1.innerHTML = "Your header text";
// and here append it to the page before the timer
var timer = document.getElementById("countdown");
var parent = timer.parentNode;
parent.insertBefore(h1, timer);
}
timeleft -= 1;
}, 1000);
Or if you already have a header, and you just want to set new text to it, then at point "// create new h1 element" just get the existing one by id and set innerHTML to it:
document.getElementById("header").innerHTML = "Your new header text";
Hopefully, it helped :)

var timeleft = 10;
var downloadTimer = setInterval(
function(){
document.getElementById("countdown").innerHTML = timeleft;
if(timeleft <= 0){
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "0";
// jump_to_your_next_function() or
clearInterval(downloadTimer);
}
timeleft -= 1;
}, 1000
);

How to load window.open('url') once only PHP & JQuery

My problem right now is the page is loading like a loop. it is popping pages non-stop , how can I load only once after i trigger the time <= 0 ? thank you.
here is what my code looks like.
<script type="text/javascript">
var timeleft = 10;
var downloadTimer = setInterval(function(){
document.getElementById("progressBar").value = 10 - timeleft;
timeleft -= 1;
if(timeleft <= 0)
clearInterval(downloadTimer);
window.open("http://localhost/ppa/movies.php", "", "width=1500px,height=1000px",true);
}, 1000);
</script>

I guess you forgot some {}'s and meant to write:
{
...
if (timeleft <= 0) {
clearInterval(downloadTimer);
window.open("http://localhost/ppa/movies.php", "",
"width=1500px,height=1000px",true);
}
}, 1000);