Rolf B: Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden.

Beitrag lesen

SELF-Forum

Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden.

Rolf B
– Informationen zu den Bewertungsregeln

problematische Seite

Hallo Peter,

<script>...</script> ist ein HTML Element. Ein solches kann nicht innerhalb eines Attributs eines anderen Elements (das input-Element) notiert werden. Wenn überhaupt, müsste dein script-Snippet das komplette HTML für das input-Element generieren.

Das ist aber nicht die beste Idee.

Besser ist es, mit Mitteln der DOM Programmierschnittstelle das input-Element herauszusuchen und ihm dann den gewünschten Wert zuzuweisen. Dafür gilt es mehreres zu beachten. Das mag jetzt kompliziert klingen, aber es sind die Grundlagen der Script-Organisation und des DOM Zugriffs, die hier benötigt werden.

(1) Dein Script steht im head, wird also ausgeführt, wenn das DOM noch gar nicht aufgebaut ist. Ohne weiteres kannst Du aus diesem Script heraus also nicht auf ein input-Element zugreifen, das im body steht. Es gibt mehrere Ansätze, wie man das lösen kann

  • Verschiebe das Script an das Ende des body
  • Packe deinen Initialisierungscode in einen DOMContentLoaded Eventhandler. Unser Wiki-Artikel Ereignisverarbeitung enthält einige Beispiele dazu.
  • Gib dem Script das Attribut defer, dadurch wird es erst gestartet, wenn der Body fertig eingelesen ist. Das geht aber nur bei Scripten, deren Quelltext über ein src-Attribut von extern geladen wird.
  • Mach aus dem Script ein Modul (type="module"). Dadurch gelten im Script leicht andere Regeln, aber type="module" bringt die defer-Eigenschaft mit und das Script wird erst ausgeführt, wenn das DOM aufgebaut ist.

Der DOMContentLoaded Handler ist sozusagen die traditionelle Lösung. Aber die Lösungen 1, 3 und 4 sind deutlich einfacher.

(2) Um das input-Element zu finden, könnstest Du die Methode document.getElementsByName() verwenden. Das ist ein bisschen umständlich, weil das name-Attribut im DOM nicht eindeutig sein muss und Du deshalb von getElementsByName - wie der Name sagt - Elemente zurückbekommst und das erste Element der Liste erstmal herausholen musst.

Einfacher ist es, dem gewünschten Element eine ID zu geben - die muss eindeutig im DOM sein - und mit getElementById zuzugreifen.

Alternativ kannst Du auch document.querySelector("[name=date_from]") verwenden, also einen Attribut-Selektor benutzen. Damit bekommst Du das erste Element mit diesem Namen. Das setzt deinerseits die Disziplin voraus, dass der Name eindeutig ist.

(3) Um einem <input type="date"> Element ein Datum zuzuweisen, kann man dem Value eine passende Zeichenkette zuweisen. Diese muss dann entweder im lokalen Format sein (z.B. tt.mm.jjjj) oder im ISO-Format jjjj-mm-dd.

Einfacher ist die Verwendung der Eigenschaft valueAsDate - der weist Du nämlich einfach das Date-Objekt zu.

<head>
   ...
   <script type="module">
      const heute = new Date(),
      const gestern = new Date(heute.getYear(),
                               heute.getMonth(),
                               heute.getDate() - 1);

      const datumVon = document.getElementById("day_from");
      datumVon.valueAsDate = gestern;

      // Die beiden letzten Zeilen könnte man auch zu einer zusammenfassen:
      document.getElementById("day_from").valueAsDate = gestern;

   </script>
   ...
</head>
<body>
   ...
   <input type="date" id="day_from" name="day_from">
   ...
</body>

Das input-Element braucht die ID für den JavaScript-Zugriff und das name-Attribut, um als Form-Element zum Server geschickt werden zu können.

Ein Hinweis am Rande:

  let date_act = '',
      date_start = '';

  date_act = new Date();
  date_start = ...;

Es ist nicht sinnvoll eine Variable mit irgendeinem Wert zu initialisieren, wenn man ihr gleich danach einen anderen Wert zuweist. Da kann mann sich auch gleich mit dem richtigen Wert initialisieren, so wie ich das in meinem Vorschlag getan habe.

Rolf

--
sumpsi - posui - obstruxi
Beitrag melden
–
Informationen zu den Bewertungsregeln