/    Sign up×
Community /Pin to ProfileBookmark

Js-Enabling a disabled next-button after 3-secs timeout

I am new to Js. I have this problem, where I have this function below. I need to disable the next button for a 3 seconds count and re-enable it. The -> button is part of a progress bar at the bottom of the page. I cannot do so without creating a new button next to the disable button.

function goToPage( num )
{
if (debugOn) { debug( “goToPage( ” + num + ” )” ); }

// When new page is selected, save last lesson, sublesson and page (so user can go back if we make it so)
lastLesson = onLesson;
lastSublesson = onSublesson;
lastPage = onPage;

// Then store the current sublesson and reset the page
onPage = num;

var pageHTML = “”;
var numOfPages = lessons[onLesson][onSublesson][“pages”];

// If we’re going to page 1, disable the back button.
if ( num == 1 )
{
pageHTML = “<button disabled=’disabled’>&lt;-</button>”;
}
// If we’re going to a page above page 1, then enable the back button
else
{
pageHTML = “<button onclick=’goToPage( ” + (num – 1) + ” )’>&lt;-</button>”;
}

// This is the text on the page control inbetween buttons
pageHTML += ” page “;
/*
* This “select” HTML generates a drop-down list of pages for the current sublesson
* Any time a different value is chosen for the drop-down, we will trigger “goToPage”
* parseInt( this.value ) returns the value of the selected option as an integer
*/
pageHTML += “<select id=’pagelist’ onchange=’goToPage( parseInt(this.value) )’>”;
for ( var i = 1; i < (numOfPages+1); i++ )
{
if ( i == num )
{
// The current page is “num” — we want that to be the selected option (what page user is currently on) pageHTML += “<option value='” + i + “‘ selected=’selected’>” + i + “</option>”;

}
else
{
// No other page will be selected
pageHTML += “<option value='” + i + “‘>” + i + “</option>”;
}
}
pageHTML += “</select>”;
pageHTML += ” of ” + numOfPages;
// If we’re on the last page of this sublesson, disable the forward button
if ( num == numOfPages )
{
pageHTML += “&nbsp;<button disabled=’disabled’>-&gt;</button>”;
}
// If we’re not on the last page, enable the forward button -Special request to disable button for 3 secs.
else
{
<!– Liliane added 31 Jan 07 –>
// Disable button on click
[COLOR=”Red”]pageHTML += “&nbsp;<button disabled=’disabled’>-&gt;</button>”;
[COLOR=”Red”]setTimeout(‘alert(“in timeout”)’, 3000);[/COLOR]
[COLOR=”Black”]// Display the next page of sublesson[/COLOR]
pageHTML += “&nbsp;<button ‘goToPage( ” + (num + 1) + ” )’>-&gt;</button>”;[/COLOR]}

// Set the div with an id of “pages” to the new page control that was just generated
document.getElementById( “pages” ).innerHTML = pageHTML;

if (debugOn) { debug( “L” + (onLesson + 1) + ” S” + (onSublesson+1) + ” P” + num ); }

}

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@sovikJan 31.2007 — you can disable button on <body onload=""> event and then run the script using SetTimeout to enable the button.
Copy linkTweet thisAlerts:
@LilianeauthorJan 31.2007 — Thank you sovik. I need to clarify my requirements a little.

Actually I cannot have a <body onLoad=... for this button. It also must start: 1) in the enable state; 2) it gets disabled for 3 seconds when clicked, and 3) becomes enabled again waiting to be clicked.
Copy linkTweet thisAlerts:
@sovikFeb 01.2007 — Liliane I think you have responded to your self when wrote this in the point form, but anyways ?

  • 1. <input type="button" name="next" value="Next">

  • 2. <input type="button" name="next" value="Next" onclick="foo()">

  • 3. write a lil script


  • <i>
    </i>&lt;script&gt;
    function enable() {
    document.getElementById("next").disabled=false;
    }
    function foo(){
    document.getElementById("next").disabled=true;
    setTimeout(enable,3000);
    }
    &lt;/script&gt;


    Hope that helps.
    Copy linkTweet thisAlerts:
    @LilianeauthorFeb 05.2007 — Great Sovik! The foo function helped me focus. I almost had it but got distracted by the buttons loaded on the fly and the recursion. Thank you very much.
    ×

    Success!

    Help @Liliane spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...