Rolf B: Ausgeben einer Javascript-Variablen in HTML <body> </body>

Beitrag lesen

Hallo Peha01,

nur um einem möglichen Verständnisproblem vorzubeugen: weißt Du eigentlich, was <script type="module"> bedeutet?

Damit legst Du ein ECMAScript Modul fest, mit den folgenden Eigenschaften:

  • Es ist das Las Vegas der Variablen (was Du im Modul an Variablen deklarierst, bleibt im Modul)
  • Modul-Skripte haben automatisch die defer-Option, d.h. sie werden erstmal auf Halde gelegt und dann ausgeführt, wenn das HTML komplett eingelesen ist und das DOM aufgebaut wurde. Und DANACH folgt der DOMContentLoaded Eventhandler.

Deswegen funktioniert überhaupt deine Initialisierung der Datum-Eingabefelder, obwohl das Script im head steht.

Was mir bei Deiner Verträge-Schleife auffällt: Woher kommt diese Variable überhaupt? Gunnar vermutete Twig als HTML Generator, aber ist das so? Woher kommt überhaupt die vertraege Variable an dieser Stelle, dafür sehe ich keine Zuweisung.

Ein kurzer Blick in die Flask-Doku sagt mir, dass diese {% %} Marker zu Jinja2 Templates gehören dürften. Und das heißt: Du hast das vertraege-Array gar nicht in JavaScript, sondern nur am Server. Und dann ist nicht zielführend, serverseitig eine Schleife darüber laufen zu lassen und pro Vertrag einen Zuweisungsblock in JavaScript zu generieren. Die so erzeugten Variablen überschreiben sich pro Durchlauf eh gegenseitig. Wenn Du 4 Verträge hättest und nur den Lieferanten zuweisen würdest, dann würde aus

      {% for vertrag in vertraege %}
          lieferant         = {{vertrag[4]}}
      {% endfor %}

in der Webseite dies:

          lieferant         = "liefer1"
          lieferant         = "liefer2"
          lieferant         = "liefer3"
          lieferant         = "liefer4"

D.h. der letzte gewinnt. Ist das die richtige Logik?

Bei einer Mischung von Server- und Client-Programmierung musst Du genau aufpassen, was Serverprogramm und was Clientprogramm ist. Flask ist ein Python-Framework, d.h. Du hast sicherlich auch noch eigenen Python-Code laufen. Die Abfolge sollte - wenn Flask etwas taugt - so sein:

  • Dein Python-Programm läuft und ermittelt energie_data, vertraege und so weiter. Zum Schluss kümmert sich entweder Flask darum, ein Template auszufüllen, oder Du hast das in deinem Python-Code selbst programmiert.
  • Das Jinja-Template wird ausgefüllt und zum Browser geschickt
  • Der Browser lädt die HTML Seite und führt derweil und hinterher JavaScript aus.

Das, was Du mit {% ... %} im Template stehen hast, ist Jinja-Templatesprache und wird im Schritt 2 ausgeführt. Der Browser hat in diesem Moment noch kein Byte an Daten empfangen. Was Du mit {{ }} im Template stehen hast, wird im Schritt 2 ins Template eingesetzt.

Erst, wenn das Template fertig ausgefüllt ist, wird das Ergebnis zum Browser geschickt. (Okay - vielleicht sendet Jinja die Zeilen, die es fertig hat, sofort an den Browser, um die Zeitdauer zu verkürzen. Aber vom Programmiermodell her ist das gleichbedeutend).

Steht in allen Verträgen der gleiche Lieferant drin, so dass Du nach Lust und Laune einen verwenden kannst? In dem Fall würde ich das Problem am Server und im Template lösen. Den Lieferanten aus dem ersten Vertrag bekommst Du vermutlich so (ich kann kein Python, ich rate nur) und hast damit in JavaScript gar nichts zu tun:

<p> Lieferant <span id="lieferant">{{vertraege[0][4]}}</span>.</p> 

Gewöhne Dir bitte auch an, jedes JavaScript-Statement mit einem Semikolon abzuschließen. JavaScript ist da sehr gnädig, aber wehe, Du lässt das Semikolon weg und er findet in der Folgezeile etwas, mit dem er syntaktisch korrekt fortsetzen kann. Dann baut er es gnadenlos zusammen. Ich habe neulich dazu hier etwas aufgeschrieben.

Rolf

--
sumpsi - posui - obstruxi