• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Warum erfolgt Änderung im HTML erst nach Skript-Ende?

M

Mia

New member
Hallo Ihr Lieben,

ich möchte wiederholt eine Eingabe machen, die dann umgerechnet wird und auf der Seite im HTML ausgegeben wird. Die Formeln sind hier für das Problem egal. Wichtig ist: Eingabe über prompt und dann eine Ausgabe im HTML.

Vereinfacht (Ganz, ganz, ganz doll vereinfacht) sieht das so aus:

Code: 
<html>
<body onClick="wechsel();">

<div id="Ergebniss">Test</div>

<script>

function wechsel(){
    
do{
    var versuch = prompt("Zahl?");
    document.getElementById('Ergebniss').innerHTML = versuch;

}while( versuch != 0 )
}
</script>

</body>
</html>

Das Problem: So lange die Funktion läuft, werden lustig die Eingaben entgegengenommen, aber erst wenn die Funktion beendet wird, wird überhaupt und dann nur die letzte Eingabe in das innerHTML geschrieben :confused:

Was mache ich falsch? Wieso ändert sich das angezeigte HTML nicht jedes Mal so lange die Funktion läuft? An welcher Stelle bin ich zu blond??? :afro:

Vielen Dank im Voraus? :)
 
Dormilich schrieb:
du nimmst an, dass dein Code Sachen macht, die er gar nicht machen soll.

z.B. steht das genau so in deinem Code drin.
"wird überhaupt und dann nur die letzte Eingabe in das innerHTML geschrieben"
Zum Vergrößern anklicken....
Aber er müsste doch bei jedem Durchlauf der While-Schleife das innerHTML neu schreiben. Oder aktualisiert sich das DOM grundsätzlich nicht so lange eine Funktion läuft?

Dormilich schrieb:
außerdem ist prompt() für User input ungeeignet => nutze Formulare (die sind für sowas extra gemacht).
Zum Vergrößern anklicken....
Hängt das mit dem Problem zusammen oder ist das ein allgemeiner Hinweis?

Viele Grüße
Mia :)
 
Mia schrieb:
Oder aktualisiert sich das DOM grundsätzlich nicht so lange eine Funktion läuft?
Zum Vergrößern anklicken....
Da ich keine native modals verwende, weiß ich auch nicht, welche Optimierungen die Browser da benutzen.

Mia schrieb:
Hängt das mit dem Problem zusammen oder ist das ein allgemeiner Hinweis?
Zum Vergrößern anklicken....
indirekt und ja.

Bei user input hängt man sich üblicherweise an die input events des Formulars (input, change, click, submit, blur, focus, keypress, etc.) um dann entsprechende Funktionen aufzurufen, die dann die Daten verarbeiten.
 
Mia schrieb:
Aber er müsste doch bei jedem Durchlauf der While-Schleife das innerHTML neu schreiben. Oder aktualisiert sich das DOM grundsätzlich nicht so lange eine Funktion läuft?
Zum Vergrößern anklicken....
doch, das dom ändert sich nach jeder anweisung, welche das dom ändert. der browser rechnet dann auch schon größen und positionen von elementen durch.
allerdings wird das dom erst gerendert, wenn js fertig ist.
 
tsseh schrieb:
doch, das dom ändert sich nach jeder anweisung, welche das dom ändert. der browser rechnet dann auch schon größen und positionen von elementen durch.
allerdings wird das dom erst gerendert, wenn js fertig ist.
Zum Vergrößern anklicken....

Gibt es irgend eine Möglichkeit das Rendern manuell anzustoßen?

Viele Grüße :)
 
tsseh schrieb:
natürlich nicht, bzw indirekt schon, indem du dein script enden lässt.
Zum Vergrößern anklicken....

Vielen Dank auf jeden Fall für die Antworten. Jetzt weiß ich etwas mehr was in JavaScript geht, bzw. nicht geht.

Ich finde es auf jeden Fall sehr interessant, dass Änderungen im DOM/ Anzeige offenbar erst wirksam werden, wenn das auslösende Skript selbst die Ausführung beendet hat - cool zu wissen :cool:

Vielen, vielen Dank für Eure Bemühungen. Ich weiß es sehr zu schätzen! :)
 
Mia schrieb:
Ich finde es auf jeden Fall sehr interessant, dass Änderungen im DOM/ Anzeige offenbar erst wirksam werden, wenn das auslösende Skript selbst die Ausführung beendet hat - cool zu wissen
Zum Vergrößern anklicken....

Änderungen des DOM zu rendern ist ein ziemlich großer Aufwand. Es ergibt daher Sinn, bis zum letztmöglichen Zeitpunkt zu warten.
 
Mia schrieb:
Vielen Dank auf jeden Fall für die Antworten. Jetzt weiß ich etwas mehr was in JavaScript geht, bzw. nicht geht.

Ich finde es auf jeden Fall sehr interessant, dass Änderungen im DOM/ Anzeige offenbar erst wirksam werden, wenn das auslösende Skript selbst die Ausführung beendet hat - cool zu wissen :cool:
Zum Vergrößern anklicken....
ich hab erst überlegt ob ich das jetzt poste oder nicht, aber "cool zu wissen" ist auch, das du das tatsächlich immer in der hand hast, wie lange dein script läuft
Code: 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id='Ergebniss'></div>
    <script>
      function wechsel()
      {
        var versuch = prompt("Zahl?");
        if (versuch > 0)
        {
          document.getElementById('Ergebniss').innerHTML = versuch ;
        }
        else
        {
          document.getElementById('Ergebniss').innerHTML = "Zahl '" + versuch + "'ist nicht größer 0!";
          setTimeout(wechsel);
        }
      }
      wechsel();
    </script>    
  </body>
</html>
allerdings solltest du das nicht verwenden um den murks mit dem prompt zum laufen zu bringen, sonder ein formular nutzen, welches dazu gedacht ist usereingaben entgegenzunehmen
 
tsseh schrieb:
allerdings solltest du das nicht verwenden um den murks mit dem prompt zum laufen zu bringen, sonder ein formular nutzen, welches dazu gedacht ist usereingaben entgegenzunehmen
Zum Vergrößern anklicken....

Ja wie cool ist das denn?:icon6::cool:

Keine Sorge. Es geht mir nicht darum irgend eine Lösung hinzukrampfen. Ich will JavaScript besser verstehen - und so etwas hilft mir dabei unglaublich.

Schreib doch einfach zu Deiner super Lösung dazu: Kinder, probiert das zu Hause nur unter Aufsicht Eurer Eltern aus ;-)

DANKE :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben