Javascript Problem bei mehrere ID's

[Rolf B]

Hallo Flowers79,

Hatte mal was gelesen von var = row......

Was auch immer Du da gelesen hast, der Kontext erschließt sich mir leider nicht. Buchstäblich gelesen wäre das auch ein Syntaxfehler, weil var ein Schlüsselwort ist, dem Du nichts zuweisen kannst…

Aber okay, wenn Du uns nichts Handfestes vorzeigen kannst, dann kann ich auf dein Problem nicht eingehen. Ich könnte Dir aber was zeigen.

Vorschlag: Generiere die Spalte mit dem Ablaufzeitpunkt so:

<table>
<tr>...<td data-ablauf="1699632600">10.11.2023 17:10:00</td></tr>
<tr>...<td data-ablauf="1704106800">01.01.2024 12:00:00</td></tr>
</table>

Im data-Attribut steht der UTC Wert des Zeitpunkts, und im Textinhalt der Zelle steht die Zeit so, dass ein Mensch sie versteht. Ganz wichtig: Es muss die UTC-Zeit sein, sonst bist Du bei Übergängen zwischen Sommer- und Winterzeit um eine Stunde daneben. Die UTC-Zeit bekommst Du in PHP, wenn Du ein DateTime-Objekt $d hast, entweder über $d->format("U") (großes U) oder über $d->getTimestamp().

Am Ende der Seite (sonst startet es zu früh) platzierst Du dieses Script:

<script>
setInterval(refreshTimers, 1000);
refreshTimers();

const dayMilliseconds = 24 * 60 * 60 * 1000;

function refreshTimers() {
  let jetzt = Date.now();
	for (let timeCell of document.querySelectorAll("[data-ablauf]")) {
    let t = parseInt(timeCell.dataset.ablauf)*1000;
    if (t < jetzt) {
      timeCell.textContent = "vorbei";
    }
    else {
     	let restZeit = Math.floor(t - jetzt),
          restDate = new Date(restZeit % dayMilliseconds);
      timeCell.textContent = Math.floor(restZeit / dayMilliseconds) + " Tage, " +
                             restDate.getHours() + " Stunden, " +
                             restDate.getMinutes() + " Minuten, " +
                             restDate.getSeconds() + " Sekunden";
    }
  }
}</script>

Was passiert da?

setInterval kennst Du, ich verwende aber keine Inline-Funktion, sondern eine eigenstände Funktion, damit ich sie einmal sofort aufrufen kann. Ansonsten würde es eine Sekunde dauern, bis die Tage-Stunden-Minuten-Sekunden Darstellung erscheint.

Mit const erzeugt man eine benannte Programmkonstante. dayMilliseconds enthält die Dauer eines Tages in Millisekunden (→ Wiki).

document.querySelectorAll("[data-ablauf]") - die querySelectorAll-Methode ermittelt alle HTML Elemente, auf die der CSS-Selektor zutrifft, den man übergibt (→ Selfhtml Wiki). [data-ablauf] ist ein Attribut-Selektor (→ Wiki), d.h. er findet alle Elemente, die ein Attribut namens data-ablauf haben.

Die Schleife for (let timeCell of ...) ist die sogenannte Iterator-Schleife, damit kann man alle Objekte durchlaufen, die die "Iterator"-Schnittstelle unterstützen (→ Wiki). Dazu gehören Arrays, aber auch die von querySelectorAll zurückgegebene NodeList. Das let vor timeCell ist das normale let für Variablendeklarationen, das ich auch für jetzt verwendet habe und wobei es sich um die moderne Version von var handelt (→ Wiki).

Im Schleifenrumpf lese ich den Wert des data-Attributs aus, dafür verwendet man die dataset-Eigenschaft. dataset.ablauf liest den Inhalt des data-ablauf Attributs. Darauf wende ich parseInt an, um eine Zahl draus zu machen, und multiplizere mit 1000, weil ich im Beispiel-HTML UTC-Sekunden verwendet habe, JavaScript aber mit Millisekunden hantiert. Du kannst genausogut auch in PHP gleich die Millisekundenwerte erzeugen und brauchst dann im JavaScript nicht mehr mit 1000 zu multiplizieren.

Dann prüfe ich, ob der Zeitpunkt schon vorbei ist. Wenn nicht, wird die Restzeit berechnet. Hier verwende ich einen netten Trick - mit new Date(restZeit % dayMilliseconds) bekomme ich ein Date-Objekt, das die Stunden, Minuten und Sekunden der Restzeit enthält. Dass daraus der 01.01.1970 wird, ist mir egal. Die Tage bestimme ich dann durch Division durch dayMilliseconds und floor, die Stunden, Minuten und Sekunden bekomme ich vom restDate-Objekt.

Das passiert einmal pro Sekunden und für jede Zelle mit data-ablauf Attribut. Nix mit IDs nötig.

Rolf