[Javascript] mantenere un bottone abilitato al refresh della pagina

ivan900

Nuovo Utente
11 Mag 2018
1
0
1
29
salve a tutti,
premetto che è la mia prima volta che scrivo qui, quindi non so se ho postato nella sezione giusta...
Il mio problema è il seguente. Ho una semplice pagina web la quale al suo interno ha due bottoni e una progress bar. di default è attivato solo il primo bottone, mentre il secondo è disabilitato. quando si preme sul primo bottone la progress bar va al 50%, si disattiva il primo bottone e si attiva il secondo. Quando premo il bottone numero due la progress bar arriva al 100% e anche il bottone due si disattiva.
il problema rimane quando io premo il bottone uno, si attiva il bottone due e si disattiva il primo ma se eseguo il refresh della pagina, tutto torna di default, con il primo bottone attivato e il secondo attivato. Vorrei che quando premo sul primo bottone (e quindi quest'ultimo si disattiva mentre si attiva il secondo) e aggiorno la pagina mi rimanesse così com'è, con il primo bottone disattivato e il secondo attivato.
Spero di essere stato chiaro, vi lascio il codice..
Grazie in anticipo

HTML:
<!DOCTYPE html>
<html>
<title>Esempio!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

    <div class="w3-container" style="padding:128px 16px" id="work">
        
        
        <br><br>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="col-sm-8" id="giorno1">
                        <div class="w3-container w3-light-grey w3-padding-64">
                            <div class="w3-row-padding">
                                <div class="col-sm-6">
                                    <center><button id="bottonegiorno1" class="w3-btn w3-grey w3-round" onclick="move()"> 1</button></center>
                                </div>                                                   
                                <div class="col-sm-6">
                                    <center><button id="bottonegiorno2" class="w3-btn w3-grey w3-round" onclick="move2()" disabled> 2</button></center>
                                </div>
                            </div>
                        </div>
                        <br>
                        <br>
                        <br>                         
                    </div>
                    <div class="col-sm-4" >
                        <p class="w3-wide"><span class="glyphicons glyphicons-dumbbell"></span>Completamento</p>
                            <div class="w3-grey">
                                <div id="myBar1" class="w3-container w3-dark-grey w3-center" style="width:0%">0%</div>   
                            </div>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>   
            </div>                   
        </div>
    </div>       
    <script>
    // COOKIE PER LA PROGRESS BAR QUANDO AGGIORNI LA PAGINA RIMANE IL VALORE CHE C'è E POI QUANDO ARRIVI AL 100 SI FERMA + IL FATTO CHE QUANDO ARRIVI AL 100% TI VIENE FUORI LA SCRITTA
        
    var cookie = leggiCookie("barrapetto1");
    if(cookie != ""){
        var elem = document.getElementById("myBar1");
        elem.style.width = cookie + '%';
        elem.innerHTML = cookie * 1  + '%';   
    }
    function leggiCookie(nomeCookie){
      if (document.cookie.length > 0)
      {
        var inizio = document.cookie.indexOf(nomeCookie + "=");
        if (inizio != -1)
        {
          inizio = inizio + nomeCookie.length + 1;
          var fine = document.cookie.indexOf(";",inizio);
          if (fine == -1) fine = document.cookie.length;
          return unescape(document.cookie.substring(inizio,fine));
        }
        else{
           return "";
        }
      }
      return "";
    }
    function scriviCookie(nomeCookie,valoreCookie,durataCookie){
      var scadenza = new Date();
      var adesso = new Date();
      scadenza.setTime(adesso.getTime() + (parseInt(durataCookie) * 60000));
      document.cookie = nomeCookie + '=' + escape(valoreCookie) + '; expires=' + scadenza.toGMTString() + '; path=/';
    }
    

    // 1*******************************************************************
    function move()
    {
      var elem = document.getElementById("myBar1");   
      var id = setInterval(frame, 10);//velocità 
      var x = parseInt(elem.textContent.substring(0, elem.textContent.length - 1)); //recupera percentuale barra
      var width = x;
      function frame() {
        if (width >= x+50 || width >= 50 ) //quando arrivi a 50 ti fermi
        {
          
          clearInterval(id);
          scriviCookie("barrapetto1", width, 30);
          document.getElementById("bottonegiorno1").disabled=true;  //disabilita il bottone  1
          document.getElementById("bottonegiorno2").disabled=false; //attiva il bottone  2

        }       
        else
        {
          width++;
          elem.style.width = width + '%';
          elem.innerHTML = width * 1  + '%';
        }
      }
    }
    
    // 2*******************************************************************
    
    function move2()
    {
      var elem = document.getElementById("myBar1");   
      var id = setInterval(frame, 10);//velocità 
      var x = parseInt(elem.textContent.substring(0, elem.textContent.length - 1)); //recupera percentuale barra
      var width = x;
      function frame() {
        if (width >= x+50 || width >= 100 ) //quando arrivi a 100 ti fermi
        {     
          clearInterval(id);
          scriviCookie("barrapetto1", width, 30);
          document.getElementById("bottonegiorno2").disabled=true;  //disabilita il bottone  1
        }
        else
        {
          width++;
          elem.style.width = width + '%';
          elem.innerHTML = width * 1  + '%';
        }
      }
    }
    
</script>

</body>
</html>
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
Ciao, il problema e che legge cookie e in base al numero in cookie muove la barra, ma senza attivare/disattivare pulsanti. La funzione per i bottoni si avvia quando clicchi sul bottone
Prova a girare cosi, riporto solo dove ho aggiunto
Codice:
            var cookie = leggiCookie("barrapetto1");
            if (cookie != "") {
                var elem = document.getElementById("myBar1");
                elem.style.width = cookie + '%';
                elem.innerHTML = cookie * 1 + '%';
             if (cookie == 50) {
                    document.getElementById("bottonegiorno1").disabled = true;  //disabilita il bottone  1
                    document.getElementById("bottonegiorno2").disabled = false; //attiva il bottone  2
                } else {
                    document.getElementById("bottonegiorno1").disabled = true;  //disabilita il bottone  1
                    document.getElementById("bottonegiorno2").disabled = true; //disabilita il bottone  2
                }
            }
 
Ultima modifica: