Problem -pasek ładowania

Question

Cześć,  mam problem. Dokładniej chce aby po naciśnieciu submita, "ładowały" się po koleji #pasek1, pasek2 i pasek3. Problem jest w tym, że gdy dodaje pętlę for która iteruje 3 razy, nie działa mi ładowanie (bez pętli ładuje się pierwszy pasek)

$(document).ready(function(){
   $("input[type=submit]").click(function(){
       for (var i=1; i<=3; i++)
       var width = 0;
       id = setInterval(change, 20);
       function change(){
           if (width==100) clearInterval(id); 
           else {
               width ++;
               $("#pasek" + i).css("width", width + "%");
           }
       } //Koniec funkcji change
   } //Koniec for
       
   }); //Koniec funkcji click
    
    
}); //Koniec funkcji ready

 

Answer 1

$("input[type=submit]").click(function(){
       for (var i=1; i<=3; i++)
       var width = 0;
       id = setInterval(change, 20);

A gdzie koniec pętli ba nawet początku nie ma :).

Comments

Rzeczywiście, lecz nawet z dobrze zrobioną pętlą nie działa :/ W consoli brak błędów

---

Przeczesz firebugiem. Po drugie change bym wywalił poza funkcję event click.

Answer 2

Do takiego 'ładowania' nie potrzeba tak dużej biblioteki(jQuery)

Możesz zrobić coś ala: http://codepen.io/kkondratowicz/pen/Bzjxpd