javascriptdisabled-inputattribution

How to set the input tag as enabled?


var startat = 5;
function disableRegBtn(bdisable){
    document.getElementById('regBtn').disabled=bdisable;
}
 
function showTime(){
    if(startat == 0){
        clearInterval(timeId);
        document.getElementById("p1").innerHTML = "please register now";
        disableRegBtn("enabled");
        return;
        }
    document.getElementById("p1").innerHTML = "please register in  " + startat + "  second(s)";
    startat--;      
}
window.onload=function(){
    document.getElementById('taid').readOnly=true;
    disableRegBtn(true);
    timeId=setInterval("showTime()",1000);
}
 
<textarea id="taid" cols="30" rows="5">Registration Agreement:
1.xxxxxx
2.xxxxxx
3.xxxxxx
</textarea> <p id="p1"><input id="regBtn" type="button" value="register" /></p>
 

I want to make people read the registration agreement at least 5 seconds before they submit their registration,when 5 second is over,please register now can show in webpage,how to make <input id="regBtn" type="button" value="register" /> work?

I make some tries for disableRegBtn() in showTime function.

disableRegBtn(false)
disableRegBtn("false")
disableRegBtn("disabled")
disableRegBtn("enabled")  

None of them can take effect.


Solution

  • You do not need to create the button again as it is already in the DOM.

    You can use variables to hold the elements so that you can use them when you need them. This will ensure that your code is more clean and robust.

    Instead of passing enabled, you can pass flase when the counter is 0. I will also suggest you to use textContent instead of innerHTML when dealing with text only content as it is more faster an predictable.

    var startat = 5;
    var buttonEl = document.getElementById('regBtn');
    var pEl = document.getElementById("p1");
    function disableRegBtn(bdisable){
      buttonEl.disabled = bdisable;
      pEl.textContent = '';
      pEl.prepend(buttonEl);
    }
     
    function showTime(){
      if(startat == 0){
        clearInterval(timeId);
        pEl.textContent = "please register now";
        disableRegBtn(false);
        return;
      }
      
      pEl.textContent = "please register in  " + startat + "  second(s)";
      startat--;      
    }
    window.onload=function(){
      document.getElementById('taid').readOnly=true;
      disableRegBtn(true);
      timeId=setInterval("showTime()",1000);
    }
    <textarea id="taid" cols="30" rows="5">Registration Agreement:
    1.xxxxxx
    2.xxxxxx
    3.xxxxxx
    </textarea> <p id="p1"><input id="regBtn" type="button" value="register" /></p>