online: 4; azi: 47; total: 52053 Webdesign - Coduri-si-functii-in-js - 03

Dezactivare buton si activare dupa un anumit timp

Functia prezentata in aceasta pagina poate fi utilizata la dezactivarea si activarea automata a unor butoane din pagina web, cu JavaScript. Dupa ce utilizatorul apasa pe buton, e dezactivat, apoi, dupa 2 secunde butonul e activat automat.
- Aceasta functie primeste un Array cu ID-urile butoanelor la care vreti sa fie aplicat efectul.

Codul functiei:
// functie pt activare si dezactivare butoane, primeste un Array cu ID-urile butoanelor
// de la http://www.discant.ro/javascript/
function disableEnableBtn(ids) {
  // parcurge array-ul cu ID-uri
  var nrids = ids.length;
  for(var i=0; i<nrids; i++) {
    // inregistreaza eveniment onclick la fiecare buton
    if(document.getElementById(ids[i])) {
      document.getElementById(ids[i]).onclick = function() {
        this.setAttribute('disabled', 'disabled');     // adauga atribut "disabled", pt dezactivare, la butonul apasat
        this.innerHTML = 'Dezactivat';        // schimba textul din buton
        var idbtn = this.id;       // retine ID-ul

        // apeleaza o functie dupa 2 secunde (2000 milisecunde)
        setTimeout( function() {
          document.getElementById(idbtn).removeAttribute('disabled');         // sterge atribut "disabled"
          document.getElementById(idbtn).innerHTML = 'Clic';        // schimba textul din buton
        }, 2000 );
      }
    }
  }
}
- Setati un Array cu ID-urile butoanelor (unul sau mai multe ID-uri), si apelati functia disableEnableBtn(), cu array-ul ca argument. Ca sa modificati timpul dupa care e activat butonul, scimbati valoarea 2000 din setTimeout(); vedeti si comentariile din cod.

- Exemplu cu doua butoane.
<button id="btn1">Click</button> - <button id="btn2">Click 2</button>
<script type="text/javascript">
// functie pt activare si dezactivare butoane, primeste un Array cu ID-urile butoanelor
// de la http://www.discant.ro/javascript/
function disableEnableBtn(ids) {
  // parcurge array-ul cu ID-uri
  var nrids = ids.length;
  for(var i=0; i<nrids; i++) {
    // inregistreaza eveniment onclick la fiecare buton
    if(document.getElementById(ids[i])) {
      document.getElementById(ids[i]).onclick = function() {
        this.setAttribute('disabled', 'disabled');     // adauga atribut "disabled", pt dezactivare, la butonul apasat
        this.innerHTML = 'Disabled';        // schimba textul din buton
        var idbtn = this.id;       // retine ID-ul

        // apeleaza o functie dupa 2 secunde (2000 milisecunde)
        setTimeout( function() {
          document.getElementById(idbtn).removeAttribute('disabled');         // sterge atribut "disabled"
          document.getElementById(idbtn).innerHTML = 'Click';        // schimba textul din buton
        }, 2000 );
      }
    }
  }
}

// array cu ID-urile butoanelor
var btnid = ['btn1', 'btn2'];

disableEnableBtn(btnid);      // apeleaza functia
</script>
Demo, clic pe buton si asteptati 2 secunde.
-