elem.style.height nicht ausgelöst innerhalb der while-Schleife

Question

Ich möchte einen Fortschrittsbalken machen, der "kollabiert", wenn Sie fertig sind.
Durch den Kollaps, ich meine wiederholt Höhe um 1 verringern.

Aber wenn der Fortschrittsbalken "fertig ist" (erreicht Breite 100), passiert nichts mehr.

Dies ist mein Code:

   function frame() { 
        var elem = document.getElementById("myBar"); 
        var height = 30; 
        if (width >= 100) { 
         while (elem.style.height != 0) { 
          elem.style.height = height + '%'; 
          height--; 
         } 
         clearInterval(id); 
        } else { 
         width++; 
         elem.style.width = width + '%'; 
        } 
       } 

Wo ist der Fehler?

Sorry, wenn meine Frage dumm oder ein Duplikat ist; Ich habe das Forum durchsucht aber keinen doppelten Beitrag gefunden.

Vielen Dank im Voraus

Answer 1

Wie Sie diese

elem.style.height = height + '%'; 

Im Folgenden wird nie falsch sein getan haben:

while (elem.style.height != 0) 

Becase dies falsch ist:

"0%"==0 // false 

Und Ich glaube dort ist etwas falsch mit der Schleife. Wenn Sie die Höhe einzeln verringern möchten, ist es besser, setInterval aufzurufen, da eine Schleife die Höhe in weniger als 1 ms auf 0 ändert. Dies hat keinen Unterschied zur direkten Einstellung der Höhe auf 0.