The function presented in this page can be used
to disable and automatically enable buttons in web page, with JavaScript. After the user clicks on the button, that button is disabled, and its text is changed, then, after 2 seconds, the button is automatically enabled.
- This function receives an Array with the ID of the buttons to which you want to add this effect.
Code of the function:
// function to disable and enable buttons, receives an array with button IDs
// from: https://coursesweb.net/javascript
function disableEnableBtn(ids){
// traverses the array with IDs
var nrids = ids.length;
for(var i=0; i<nrids; i++){
// registers onclick event to each button
if(document.getElementById(ids[i])) {
document.getElementById(ids[i]).onclick = function() {
this.setAttribute('disabled', 'disabled'); // disables the button by adding the disabled attribute
this.innerHTML = 'Disabled'; // changes the button text
var idbtn = this.id; // stores the button ID
// calls a function after 2 sec. (2000 milliseconds)
setTimeout(()=>{
document.getElementById(idbtn).removeAttribute('disabled'); // removes the disabled attribute
document.getElementById(idbtn).innerHTML = 'Click'; // changes tne button text
}, 2000 );
}
}
}
}
- Set an array with IDs of the buttons (one or more IDs), then call the
disableEnableBtn() function, passing the array as argument. To change the time after which the button is enabled, modify the value of 2000 added in
setTimeout(); see also the comments in code.
- Example with two buttons.
<h4>Example automatically Disable and Enable button</h4>
<p>Click on each button and wait 2 seconds.</p>
<button id='btn1'>Click</button> - <button id='btn2'>Click 2</button>
<script>
// function to disable and enable buttons, receives an array with button IDs
// from https://coursesweb.net/javascript
function disableEnableBtn(ids){
// traverses the array with IDs
var nrids = ids.length;
for(var i=0; i<nrids; i++){
// registers onclick event to each button
if(document.getElementById(ids[i])) {
document.getElementById(ids[i]).onclick = function() {
this.setAttribute('disabled', 'disabled'); // disables the button by adding the disabled attribute
this.innerHTML = 'Disabled'; // changes the button text
var idbtn = this.id; // stores the button ID
// calls a function after 2 sec. (2000 milliseconds)
setTimeout(()=>{
document.getElementById(idbtn).removeAttribute('disabled'); // removes the disabled attribute
document.getElementById(idbtn).innerHTML = 'Click'; // changes tne button text
}, 2000 );
}
}
}
}
// array with IDs of buttons
var btnid = ['btn1', 'btn2'];
disableEnableBtn(btnid); // calls the function
</script>
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area><img src="image.jpg" usemap="#map1">
<map name="map1">
<area shape="rect" coords="9, 120, 56, 149" href="#">
<area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position#id {
overflow: auto;
}Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseoutdocument.getElementById("id").onmouseover = function(){
document.write("Have Good Life");
}Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POSTif(isset($_GET["id"])) {
echo $_GET["id"];
}