Assegnare valore tramite id DOM

**LuigiDH** · 15-05-2016, 20:32

Buonasera a tutti, avrei bisogno del vostro aiuto per risolvere un problema piccolo ma per me GRANDE!

Ho una progress bar circolare che dall'esempio trovato cambiava valore con una barra di scorrimento, in questo modo:

codice:

    <input type="range" id="progressController" min="0" max="100" value="15" />

mentre la progressbar ha questo codice:

codice:

  <canvas id="activeProgress" class="progress-active"  height="180px" width="180px"></canvas>

Mi servirebbe cambiare il valore di questa barra attraverso una funzione javascript ed ho provato così:

codice:

<script>function InsLimite() {
document.getElementById("progressController").value = "45";
}
</script>

e così:

codice:

<script>function InsLimite() {
document.getElementById("activeProgress").value = "45";
}
</script>

ma nulla....
Sapete darmi un consiglio per favore???

Se avete bisogno di altro codice per capire non esitate....

**cavicchiandrea** · 15-05-2016, 21:53

Prova ad inserire il volere senza virgolette " solo 45 in progressController

**LuigiDH** · 15-05-2016, 23:27

Niente, succede solo che la barra di scorrimento si posiziona nella posizione del 45% ma la progress bar sta sempre allo stesso punto...

In prativa l'id "progressController" viene controllato su cambiamento sul file:

<script src="js/index.js"></script>

così completo:

codice:

<!DOCTYPE html><html >
  <head>
    <meta charset="UTF-8">
    <title>Circular Progress Bar</title>
    
    


    
        <link rel="stylesheet" href="css/StyleProgressBar.css">


    
    
    
  </head>


  <body>


    <div id="page" onclick="InsLimite()">
  <div class="progress-bar">
        <canvas id="inactiveProgress" class="progress-inactive" height="180px" width="180px"></canvas>
            <canvas id="activeProgress" class="progress-active"  height="180px" width="180px"></canvas>
            <canvas id="activeProgress2" class="progress-active2"  height="180px" width="180px"></canvas>
    <p>0%</p>
  </div>
  <div id="progressControllerContainer">
    <input type="range" id="progressController" min="0" max="100" value="15" />
    <input type="range" id="progressController2" min="0" max="100" value="15" />
  </div
</div>


<script>
function InsLimite() {


document.getElementById("progressController").value = 45;
}
</script>




    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


        <script src="js/index.js"></script>


    
    
    
  </body>
</html>

mentre il file index.js:

codice:

$(document).ready(function(){
            var $pc = $('#progressController');
            var $pc2 = $('#progressController2');
            var $pCaption = $('.progress-bar p');
            var $pCaption2 = $('.progress-bar2 p');
            var iProgress = document.getElementById('inactiveProgress');
            var iProgress2 = document.getElementById('inactiveProgress2');
            var aProgress = document.getElementById('activeProgress');
            var aProgress2 = document.getElementById('activeProgress2');
            var iProgressCTX = iProgress.getContext('2d');








            
            drawInactive(iProgressCTX);
            
            $pc.on('change', function(){
                var percentage = $(this).val() / 100;
                console.log(percentage + '%');
                drawProgress(aProgress, percentage, $pCaption);
            });


            $pc2.on('change', function(){
                var percentage = $(this).val() / 100;
                console.log(percentage + '%');
                drawProgress2(aProgress2, percentage, $pCaption2);
            });




            function drawInactive(iProgressCTX){
                iProgressCTX.lineCap = 'square';


                //outer ring
                iProgressCTX.beginPath();
                iProgressCTX.lineWidth = 8;
                iProgressCTX.strokeStyle = '#e1e1e1';
                iProgressCTX.arc(90,90,70,0,2*Math.PI);
                iProgressCTX.stroke();


                //progress bar
                iProgressCTX.beginPath();
                iProgressCTX.lineWidth = 0;
                iProgressCTX.fillStyle = '#e6e6e6';
                iProgressCTX.arc(90,90,65,0,2*Math.PI);
                iProgressCTX.fill();


                //progressbar caption
                iProgressCTX.beginPath();
                iProgressCTX.lineWidth = 0;
                iProgressCTX.fillStyle = '#fff';
                iProgressCTX.arc(90,90,55,0,2*Math.PI);
                iProgressCTX.fill();


            }
            function drawProgress(bar, percentage, $pCaption){
                var barCTX = bar.getContext("2d");
                var quarterTurn = Math.PI / 2;
                var endingAngle = ((2*percentage) * Math.PI) - quarterTurn;
                var startingAngle = 0 - quarterTurn;


                bar.width = bar.width;
                barCTX.lineCap = 'square';


                barCTX.beginPath();
                barCTX.lineWidth = 10;
                barCTX.strokeStyle = '#76e1e5';
                barCTX.arc(90,90,60,startingAngle, endingAngle);
                barCTX.stroke();


                $pCaption.text("consumo" + (parseInt(percentage * 100, 10)) + '%');
            }
            function drawProgress2(bar, percentage, $pCaption){
                var barCTX = bar.getContext("2d");
                var quarterTurn = Math.PI / 2;
                var endingAngle = ((2*percentage) * Math.PI) - quarterTurn;
                var startingAngle = 0 - quarterTurn;


                bar.width = bar.width;
                barCTX.lineCap = 'square';


                barCTX.beginPath();
                barCTX.lineWidth = 8;
                barCTX.strokeStyle = '#640000';
                barCTX.arc(90,90,70,startingAngle, endingAngle);
                barCTX.stroke();


                $pCaption.text( (parseInt(percentage * 100, 10)) + '%');
            }


                var percentage = $pc.val() / 100;
                drawProgress(aProgress, percentage, $pCaption);




                var percentage2 = $pc2.val() / 100;
                drawProgress2(aProgress2, percentage2, $pCaption2);




            
        });

Non capisco il motivo!!!

**KillerWorm** · 16-05-2016, 00:39

Ciao, vedo un tag chiuso male nel codice che hai postato. Non so se sia dovuto al copia-incolla sul forum, ma prova a verificare:

codice:

    <input type="range" id="progressController2" min="0" max="100" value="15" />
  </div    <-- qui manca qualcosa
</div>

**LuigiDH** · 16-05-2016, 02:04

Si grazie, ma non risolve il problema!

Comunque, con la prova che mi ha fatto fare cavicchiandrea si spostava solo la barra di scrollo senza eseguire niente nella progress bar.
Questo è strano, perchè dovrebbe abilitare l'evento change e non lo fa. Solo se sposto il cursore col mouse al rilascio si abilita il change. Se magari posso legare il change a qualsiasi cambiamento avrei già risolto... ma come fare?

**LuigiDH** · 16-05-2016, 02:26

Ho risolto modificando l'evento change in evento click e poichè non era un click diretto sull'oggetto ho inserito il codice che segue in una funzione:

codice:

function Attiva(str) {
document.getElementById("progressController2").value= str;
document.getElementById("progressController2").click();
}

vi ringrazio comunque...

**KillerWorm** · 16-05-2016, 02:32

Bene, l'importante è che tu abbia risolto

Buon proseguimento

Discussione: Assegnare valore tramite id DOM

Strumenti discussione

Ricerca discussione

Visualizza

Assegnare valore tramite id DOM

Permessi di invio