[Javascript] mantenere un bottone abilitato al refresh della pagina

Discussione in 'Javascript' iniziata da ivan900, 11 Maggio 2018.

  1. ivan900

    ivan900 Nuovo Utente

    Registrato:
    11 Maggio 2018
    Messaggi:
    1
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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>
    
     
  2. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    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: 13 Maggio 2018
Sto caricando...

Condividi questa Pagina