Trying to make a timer delayed button

Callan S. · Post by **Callan S.** » Wed Sep 02, 2015 1:19 am

I'm not much cop at javascript. I found a script that makes a button take ten seconds before it can be clicked/submitted. But I can't seem to implement it.

I tried to see if I was implementing scripts right at all - that 'paragraph changed' thing does work though.

So I don't know what I'm doing wrong? Any help appreciated.

Side notes: The timer is simply there to help ensure ads get some time to load. It'll just be a submit button in the end, not a download link.

Code: Select all

<!DOCTYPE html>
<html>
<head>


<script>
var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;

downloadButton.parentNode.replaceChild(newElement, downloadButton);

id = setInterval(function() {
    counter--;
    if(counter < 0) {
        newElement.parentNode.replaceChild(downloadButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
    }
}, 1000);
</script>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>


<style>
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}

.button {
    background-color: #ddcccc;
    border: 1px solid black;
    color: black;
    font-family: Arial;
    font-size: small;
    text-decoration: none;
    padding: 3px;
}

</style>



</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>



<a href="downloadFile.zip" id="download" class="button">Download the file...</a><p>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Chris · Post by **Chris** » Wed Sep 02, 2015 10:26 am

The problem is it can't access the button as it is not added to the DOM before the script is loaded.

You would need to place this inside winodw.onload or put the script at the bottom of the document.

Code: Select all

<!DOCTYPE html>
<html>
<head>




<style>
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}

.button {
    background-color: #ddcccc;
    border: 1px solid black;
    color: black;
    font-family: Arial;
    font-size: small;
    text-decoration: none;
    padding: 3px;
}

</style>



</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>



<a href="downloadFile.zip" id="download" class="button">Download the file...</a><p>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>


<script>
var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;

downloadButton.parentNode.replaceChild(newElement, downloadButton);

id = setInterval(function() {
    counter--;
    if(counter < 0) {
        newElement.parentNode.replaceChild(downloadButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
    }
}, 1000);
</script>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Callan S. · Post by **Callan S.** » Thu Sep 03, 2015 1:30 am

Thanks, Chris. Yeah, that worked!

Does the paragraph one work because when you click it calls the code, but the countdown has to call itself - it tries to but when the script is inside the header the button isn't there at that point so it just does nothing?

KyleMassacre · Post by **KyleMassacre** » Thu Sep 03, 2015 2:30 am

http://jsfiddle.net/n6rxz3uh/1/

I got it to work using an event listener for the click on that button. I hop that's what you were talking about because when I tried clicking the button it didn't change the text. But sometimes button on my phone in jsfiddle don't work right so I could be completely off base

And I have no idea why adding a listener programmatically works and the inline doesn't

Post by **Jackolantern** » Fri Sep 04, 2015 2:15 am

That whole "script executed before the DOM was loaded" issue is probably one of the worst gotchas in all of Javascript. It gives no feedback when you slip up and it happens. That is why you want to get in the habit of either putting scripts at the bottom of the page, or use something like jQuery's excellent initial load event handler.

Trying to make a timer delayed button

Trying to make a timer delayed button

Re: Trying to make a timer delayed button

Re: Trying to make a timer delayed button

Re: Trying to make a timer delayed button

Re: Trying to make a timer delayed button