[Javascript] [HTML] come aumentare il valore di una progress bar quando si preme un bottone

Marco.acqua

Nuovo Utente
3 Mag 2018
1
0
1
27
salve,
ho un problema. ho trovato questo codice per poter far aumentare il valore presente nella progress bar quando premo un bottone
Codice:
<!DOCTYPE html>
<html>
<title>Prova</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">

<h2>Progress bar dinamica</h2>
<p>esempio:</p>

<div class="w3-light-grey">
  <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>

</div>

<script>
function move() {
  var elem = document.getElementById("myBar"); 
  var width = 20;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>
il problema è che con questo script quando si preme il bottone, qualunque percentuale è presente sul bottone (10%, 20% 50% ecc), la percentuale sale al 100%. io vorrei che quando premo il bottone il valore contenuto nella progress bar salga solo di un valore che decido io (esempio solo del 10% quindi se io mi trovo al 20% e premo il bottone la progress bar deve andare al 30%)..
Grazie mille a chiunque mi aiuti perché sono un po' disperato e tutto ciò serve per la maturità ..
 
Ultima modifica di un moderatore:
Ciao Marco, ci sono regole non scritte ma da molti di noi sottointese, che gli esercizi per la scuola non si da la soluzione perchè è troppo comodo per lo studente che deve cavarsela da solo se studia.

Poi qui sul forum c'è un regolamento che dovresti leggere il quale dice che sei tenuto come tutti noi a postare il codice utilizzando il tag apropriato
code.gif
oppure dalla barra degli strumenti l'opzione codice
box inserisci 2.png.JPG

Per questa volta te lo sistemo io ma in futuro dovrai farlo tu!

Inoltre questa non è la sezione giusta per il tuo problema ti sposto in javascript
 

Discussioni simili