Wert aus ESP an erzeugter Webside anzeigen

[Richi]

Hallo liebe HTML Cracks,
ich komme aus dem Theme Arduino/ESP Programming und die Welt der HTML/CSS/Java ist mir noch sehr fremd.
Deswegen muss ich euch mal um Hilfe bitten.
Ich hoffe ich kann euch alles möglichst genau erklären was ich möchte damit Ihr meine Intensionen dazu versteht.
Also mal kurz zusamm gefasst:
Ich nutzte einen ESP8266 um eine Lichterkette zu steuern.
Dieser erzeugt mir als Server eine Website, auf die über Browser zugegriffen wird.
Diese Seite stammt jedoch nicht von mir, drum steh ich ja so dumm da.
Nun habe ich den Code schon in vielen Dingen an meine Wünsche angepasst, wollte nun aber noch eine (wie ich dachte) winzige Funktion hinzufügen.
Und zwar eine Startzeit ausgabe.
Also nichts anderes wie ein Textfeld in dem angezeigt wird wann der ESP gestartet/resetet hat/ist.
Dazu benötige ich die Zeit aus dem ESP, diese wird beim start mit "timeClient.getFormattedTime();" ausgelesen und in den "String startZeit;" übergeben.

Nun zum Problem, in dem ganzen Code wird nur eine Liste von Mod Namen an die Seite gesendet die ebenfalls in einem String geschickt wird, aber aus Nummern die in Namen umgewandelt werden, zusammgerechnet.
Diese Funktion stammt nicht von mir und ich hab keinen Plan wie er es überträgt.
Da ich aus den Auflistungen nicht schlau werde.
Ich habe Versucht meinen Wert dort mit dran zu hängen, ohne Erfolg, das hat mir nur die ganze Seite zerlegt.

Aktuell versuche ich es seperat zu senden und mir als Beispiel dafür die Mod Listung zu Kopieren, das sieht wie folgt aus:

ESP Code:

String startZeit;

void setup(){
startZeit = timeClient.getFormattedTime();    <<-------------- mein Wert

server.on("/", srv_handle_index_html);
  server.on("/main.js", srv_handle_main_js);
  server.on("/modes", srv_handle_modes);
  server.on("/set", srv_handle_set);
  server.on("/Zeit", srv_handle_startZeit);      <<-------------- mein Eintrag
  server.onNotFound(srv_handle_not_found);
  server.begin();
}

void loop(){
// kein weiterer Aufruf
}
void srv_handle_startZeit() {
  server.send(200, "text/plain", startZeit);  <<------------- mein Datenpaket
}

main.js

  // get list of modes from ESP     <<----------das ist der Originale Mod abruf
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
   if (xhttp.readyState == 4 && xhttp.status == 200) {
     document.getElementById('modes').innerHTML = xhttp.responseText;
     modes = document.querySelectorAll('ul#modes li a');
     modes.forEach(initMode);
   }
  };

  //var xhttp = new XMLHttpRequest();                          <<---- ab hier hab ich es selbst versucht
  xhttp.onreadystatechange = function() {                                                    alles noch im Aufbau
   if (xhttp.readyState == 4 && xhttp.status == 200) {                                  klappt aber bisher nicht
     document.getElementById('Zeit').innerHTML = xhttp.responseText;
    }
  };

  xhttp.open('GET', 'modes', true);
  xhttp.open('GET', 'Zeit', true);            <<---------- mein Eintrag
  xhttp.send();
});

index.html

<ul class='startTimer'>
          <div id="Zeit"></div>       
</ul>

/* Das ist mein Eintrag in der HTML, weiter oben noch ein CSS aufbau für 'startTimer'
   im großen und ganzen geht die Ausgabe, wenn sie was bekommt. Ich hatte da mal einen
   Fehler in der Main.js der mir zwar die Mods gekillt hat aber es wurde mir hier der Wert
   "01:00" angezeigt, also denke ich nicht das der Fehler in der HTML liegt.
*/

So nun zur Frage, WO liegt mein Fehler? Sende ich die Daten überhaupt richtig im ESP an die MAIN.JS?
Wenn ja, wie muss ich den Wert aus "startZeit" dort richtig abrufen um ihn in der INDEX.HTML als Wert an Stelle von "Zeit" auszugeben?
Nochmal zum Verständnis, es soll keine laufende Echtzeit sein sondern nur ein Zeit eintrag der Startzeit des ESP's in HH:MM Format.
Das Bild zeigt linksseitig einen Streenshot, dort wo 00:00 steht sollte ja eigentlich auch 11:42 stehn da der ESP grad gestartet hatte. Die zusatz Mod Namen wurden wieder Gekillt, das bekomme ich mit der oben Editierten MAIN.js Nehme ich meinen Eintrag komplett raus, sind die MODS wieder da und die 00:00 ist weg nur noch ein leerer Rahmen steht dann dort.

 

[Richi]

@Sempervivum
Danke erstmal für deine Antwort.
das mit dem Zweiten Objekt habe ich auch schon mitbekommen und es auch schon einzeln gesetzt.Vom Aufbau der Seite sieht her sieht jetzt alles gut aus, nur der Zeitwert wird mir nur mit 00:00 angezeigt. Ich bekomme einfach die Startzeit nicht gesetzt was warscheinlich daran liegt das ich auch irgendwie überhaupt nicht darauf zu greifen, weil ich auch nicht weis wie, mir sich das aber auch aus dem oberes Beispiel mit dem XMLHttpRequest(); nicht erschliest.

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
   if (xhttp.readyState == 4 && xhttp.status == 200) {
       document.getElementById('Zeit').innerHTML = xhttp.responseText;
   }
  };
  xhttp.open('GET', 'Zeit', true);
  xhttp.send();
 
Das ist mein aktueller Stand, nur wo liest er hier den gesendeten Wert von:

void srv_handle_startZeit() {
  server.send(200, "text/plain", startZeit);
}

aus? Mir erschliest sich schon warum er 00:00 anzeigt, da er einfach keinen Wert bekommt
da ich ja so gesehen "startZeit" nicht übergebe, aber wo übergibt das Obere beispiel denn seine Werte?

Mit dem fetch beispiel das versuche ich mal, obwohl ich noch nicht mal da den Unterschied kenne.

 

[Richi]

Ahh OK, ja da sehe ich das er tatsächlich die 00:00 sendet, also funktioniert es schon so wie gewollt nur mit meiner Wert übergabe scheint was nicht hin zu hauen.die mache ich ja so:

startZeit = timeClient.getFormattedTime();

bringt nur anscheinend nichts, ich habe den timeClient jetzt direkt in meinen handle gesetzt und dort funktioniert er.
Leider wird dadurch die Zeit aktualisiert und läuft mein Seite neu laden mit. Da muss ich sehen wo dort der Fehler liegt.
aber im großen ganzen läuft es so mit der fetch.
Danke dir für die Hilfe

 

[Richi]

Rätzel gelöst, ich habe den Eintrag timeClient.update(); übersehen der sich unter meiner Wertübergabe befunden hat, deswegen hat er 00:00 bekommen, da der timeClient sich einfach noch nicht die Zeit geholt hatte.
Jetzt funktioniert alles wie gewollt.