[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
26
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:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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
Autore Titolo Forum Risposte Data
F Creare elementi html con javascript Javascript 3
Shyson Meglio Javascript o HTML? Javascript 4
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
T [Javascript] Richiamare un file.js (iframe) in html Javascript 1
Emix [Javascript] Somma con array input HTML Javascript 1
S [Javascript] [HTML] App incorpora pagina web - Come impedirlo? Javascript 0
K [Javascript] [HTML] Invertire colori alternati in tabella Javascript 3
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
M [Javascript] [HTML] link interno Javascript 1
N [Javascript] [HTML] Scelta di una select e compilazione automatica delle restanti Javascript 0
V [Javascript] [HTML] Attivazione nuovi campi di input Javascript 2
D [Javascript] [HTML] Evidenziare testo di una text Javascript 1
D [Javascript] [HTML] Insertimento audio Javascript 8
S [Javascript] [HTML] creare stringhe di riferimento da riutilizzare Javascript 5
C [Javascript] [HTML] È possibile "puntare" un iframe? Javascript 14
W [Javascript] Eseguire script residente nel sistema da html remota Javascript 0
Marcox360 Tris con HTML e JavaScript Javascript 0
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
A [Javascript] NodeJs e HTML Javascript 2
D [Javascript] [HTML] Countdown su Mobirise di 24 ore relative per ogni utente. Javascript 4
W [Javascript] [HTML] menù responsive fisso Javascript 2
C [Javascript] cambio dinamico riferimento elemento html Javascript 2
V Passaggio codice html a javascript Javascript 8
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
A [Javascript] Passare variabile tra pagine html diverse Javascript 13
Monz94 [Javascript] [HTML] Creare Checkbox o Radio con Immagini Javascript 0
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
zammaeng [Javascript] [HTML] globo 3D Javascript 5
trattorino [Javascript] [HTML] risultato imput dentro text area Javascript 2
trattorino [Javascript] [PHP] due righe su sorgente html Javascript 3
C [Javascript] HTML form attributes: combining charset with enctype HTML e CSS 4
R [Javascript] [HTML] [PHP] Javascript 2
U [Javascript] [HTML] doppio click Javascript 18
S [Javascript] Slider html: Mostrare immagini su 4 colonne Javascript 20
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
S [Javascript] Sostituire elemento HTML preso randomicamente dentro array Javascript 1
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
asevenx [Javascript] [HTML] personalizzare stili input select Javascript 5
romeocharly errore del codice html con javascript durante ottimizzazione websitex5 Javascript 7
R Javascript e html - estrazione EXIF da jpg con link per geolocalizzazione google maps Javascript 0
A [CERCO] cerco esperto di codici HTML e JavaScript per lavorare ad 1 applicazione Offerte e Richieste di Lavoro e/o Collaborazione 1
U Far partire una funzione JavaScript premendo bottone in html Javascript 13
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
I Pubblicare un sito realizzato con html, css e javascript Webdesign e Grafica 13
A eseguire codice html da funzione javascript Javascript 2
P text/ javascript in html Javascript 3

Discussioni simili