I have a Javascript that works and its purpose is to hide a link/button for XYZ period of time.
Javascript:
<script type="text/javascript">
function showNextButton() {
document.getElementById("nextbutton").style.visibility = "visible";
}
// adjust this as needed, 1 sec = 1000
setTimeout("showNextButton()", 30000);
</script>
HTML:
<div id="nextbutton" style="visibility: hidden">
<a href="nextpage.html">Continue</a>
</div>
The script works great but I would like to know how I can show a disabled link/button prior to having the main button appear after 30 seconds.
For Example Button: (This is a disabled useless button just letting visitor know they have to wait 30 seconds to Continue.) [Disabled for 30 Seconds]
Then thirty seconds passes but and have that replaced with: [Continue]
Can someone please tell me what I have to do to modify this script to do this?
Thanks,
Description
This code will countdown from 30 to 0 then switch to the continue link. You could change it or ask for something else.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="wait" style="display: block">
<a id='countdown-link'>30 seconds</a>
</div>
<div id="nextbutton" style="display: none">
<a href="nextpage.html">Continue</a>
</div>
</body>
</html>
JS
//29 because we have already waited 1 second before
var counter = 29;
//function that gets called every second
function showNextButton() {
//if we are at 0 it has been 30 seconds
if(counter == 0)
{
//show the continue link
document.getElementById("nextbutton").style.display = "block";
//hide the wait text
document.getElementById("wait").style.display = "none";
//disable the timer so we don't keep calling this function after 30 seconds
clearInterval(myTimer);
}
else
{
//every second change the text
document.getElementById("countdown-link").innerHTML = counter + ' seconds';
//lower the timer counter by 1 since it has been 1 second
counter--;
}
}
//setup timer to call showNextButton every 1 second
var myTimer = setInterval("showNextButton()",1000);
Verified Browsers
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<input id='next-button' type='button' disabled onclick="window.location='nextpage.html'" value='30 seconds'/>
</body>
</html>
JS
var counter = 29;
function showNextButton() {
if(counter == 0)
{
document.getElementById("next-button").disabled = false;
document.getElementById("next-button").value = 'Continue';
clearInterval(myTimer);
}
else
{
document.getElementById("next-button").value = counter + ' seconds';
counter--;
}
}
var myTimer = setInterval("showNextButton()",1000);
Make another element visible when you hide the nextbutton, and then hide it when you enable the nextbutton.
<script type="text/javascript">
function showNextButton() {
document.getElementById("nextbutton").style.visibility = "visible";
document.getElementById("disabledbutton").style.visibility = "hidden";
}
document.getElementById("disabledbutton").style.visibility = "visible";
// adjust this as needed, 1 sec = 1000
setTimeout("showNextButton()", 30000);
</script>
<button href="11.html" id="nextbutton" disabled>Disabled for 30 seconds</button>
<script type="text/javascript">
function showNextButton() {
document.getElementById("nextbutton").disabled = false;
document.getElementById("nextbutton").innerHTML = "Continue";
}
// adjust this as needed, 1 sec = 1000
setTimeout(function(){showNextButton()},30000);
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.