Pete: Statusbar -> width und innerHTML per javascript ändern

Hi, ich hab ne div die als Statusanzeige dienen soll.
<div id="statusBar" style="background-color:#d0e0e9; width: 0px; height: 15px; text-align: center;"><div id="statusText"></div></div>

per klick auf den button soll sich die statusanzeige für jeden durchlauf ändern:
<input type="button" value="TU ES" name="B3" onclick="test();">

function test(){
maxRow=9000;
for(r=0; r<maxRow; r++){
            //status-bar
            document.getElementById("statusBar").style.width = (maxRow/250) * ((100 / maxRow) * r+1);
            //percent
            document.getElementById("statusText").innerHTML = ((100 / maxRow) * (r + 1)) + "%";
}

das problem: die statusanzeige ändert sich erst, wenn die for-schleife verlassen wird. ich möchte aber den fortschritt für jeden durchlauf sehen. wo liegt das problem?

  1. Hi,

    for(r=0; r<maxRow; r++){
                //status-bar
                document.getElementById("statusBar").style.width = (maxRow/250) * ((100 / maxRow) * r+1);

    Da fehlt die Angabe der Einheit.
    (Ausserdem solltest du die Referenz auf das Element nicht jedes Mal auf's neue ermitteln lassen, sondern sie dir lieber vorher einmal besorgen, und in einer Variablen ablegen.)

    das problem: die statusanzeige ändert sich erst, wenn die for-schleife verlassen wird. ich möchte aber den fortschritt für jeden durchlauf sehen. wo liegt das problem?

    In der for-Schleife - erst wenn diese in sich geschlossene Einheit abgearbeitet ist, wird die "Kontrolle" wieder an die Rendering-Engine des Browsers zurueckgegeben.

    Wenn du zwischenzeitlich Veraenderungen an Elementen/Styles "sichtbar" machen willst, musst du die Schleife durch ein Konstrukt wiederholter Funktionsaufrufe mittels setTimeout/setInterval ersetzen.

    MfG ChrisB

    --
    "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
    1. Wenn du zwischenzeitlich Veraenderungen an Elementen/Styles "sichtbar" machen willst, musst du die Schleife durch ein Konstrukt wiederholter Funktionsaufrufe mittels setTimeout/setInterval ersetzen.

      Es ist so, dass ich in der schlaufe daten aus einem array weiterverarbeite, ich brauche für die statusanzeige also die gesamte anzahl durchläufe so wie den count des aktuellen durchlaufes.
      Daher kann ich die schleife nur schwer umgehen.
      Den Interval kann ich setzen, nur bräuchte ich ja trotzdem die werte a der durchläufe. ich häng gerade etwas bei dieser Zwickmühle...

      1. Hallo Pete,

        vieleicht hilft dir http://aktuell.de.selfhtml.org/artikel/javascript/timer/index.htm weiter.

        Gruß, Jürgen