ESP8266, HTML: Link per Text auf Webseite aufrufen

HotSystems · April 13, 2025, 1:34pm

Hallo,
ich brauche mal ein wenig Unterstützun von den HTML-Profis.

Ich verwende zahlreiche Tools (Website auf ESP8266) von fips für meine "Hausautomation", die auf einzelnen Webseiten im eigenen Netz dargestellt werden.
Diese Seiten rufe ich aktuell per Schaltfläche auf und möchte das mit einzelnen Seiten etwas optimieren.
Dazu möchte ich statt der Schaltfläche einen angezeigten Text auf der Webseite anklicken.

Im Beispiel der Seite wäre das z.B. Wassertank-Ventil: offen.
Wobei es hier der Text "offen" sein muss, da nur dieser direkt erreichbar ist.

Der gesamte HTML Text wurde aus den Beispielen von fips entwickelt.
Der HTML-Text für die obige Zeile wird dynamisch geladen und sieht auf der Seite wie folgt aus:

document.querySelector('#wert' + 5).innerHTML = (array[5].wert) ;
document.querySelector('#wert' + 5).style.color = array[5].wert == 'offen' ? 'green' : 'red';

Meine Frage dazu, wie könnte das HTML dazu aussehen, um auch den Text "offen", der in "array[5].wert" steht, anklickbar zu machen und damit einen HTML-Link aufzurufen ?

Mittels dieses Links starte ich dann die Seite des "Tankventils" = '//192.168.100.205/ventil.html', was bisher per Schaltfläche funktioniert.

Mein Versuch, es wie folgt zu lösen, klappte leider nicht.

document.querySelector('#wert' + 5).innerHTML = <a href="//192.168.100.205/ventil.html">array[5].wert</a> ;

Ich freue mich auf eure Tipps.

noiasca · April 13, 2025, 1:42pm

Du weist mit = ein string literal dem innerhtml zu, also wirst du da aussen rum Anführungszeichen brauchen

HotSystems · April 13, 2025, 1:52pm

Danke für den Tipp.
Meinst du das so:

document.querySelector('#wert' + 5).innerHTML = "<a href="//192.168.100.205/ventil.html">array[5].wert</a>"

noiasca · April 13, 2025, 1:57pm

so ca. Aber nur ca.
Am keyword highlighting erkennst du, dass du die inneren Hochkommata escapen musst oder verwende Apostrophe. Und das im Link verwendete array[5].wert wirst wieder mit + konkatinieren müssen, weil das kommt ja wieder aus dem JavaScript.

ungeprüft:

document.querySelector('#wert' + 5).innerHTML = "<a href='//192.168.100.205/ventil.html'>"+array[5].wert+"</a>" ;

HotSystems · April 13, 2025, 2:04pm

Ok, danke schon mal. Werde ich nachher testen.
Bin aktuell nicht am PC.

HotSystems · April 13, 2025, 3:32pm

Genial, danke Dir, das funktioniert.
Allerdings übernimmt er die Farbe (rot + grün) der Schrift nicht.
hast du dafür noch eine Idee ?

Edit:
Hab schon was gefunden, werde ich mal testen und posten.
Thema Style.

Tommy56 · April 13, 2025, 4:36pm

Wenn Du mehrere Sachen mit einem Element machen willst, ist es sinnvoll, dieses in einer Variablen zu halten.

var ele = document.querySelector('#wert' + 5);
ele.innerHTML = ...
ele.style.color="#ff0000"; // rot
ele.style.color="#00ff00"; // grün

oder andere Farbwerte

Gruß Tommy

HotSystems · April 13, 2025, 5:11pm

Danke Tommy,
mit der Farbumschaltung bin ich ja immer klar gekommen, (Eingangspost) .
Nur jetzt als Link muss ich in den Styles noch etwas nacharbeiten.
Werde ich wohl später noch testen.

noiasca · April 13, 2025, 5:49pm

hättest die Farbe nicht über style.color geändert sondern über eine Klasse, hättest nur in deinem Stylesheet das a element (evtl auch die entsprechenden Pseudoklassen/Selektoren) auch entsprechend stylen müssen.
Aufpassen, in JavaScript setzt du die Klasse mit className.

Generell: Dass man Links farblich ändert aufgrund von anderen Attributen ändert finde ich suboptimal.

Rintin · April 13, 2025, 5:57pm

Du könntest dem Link sagen, das es die Farbe erben soll...

HTML

<html>
<head>
    <style>
        #ventil a{
            color: inherit;
        }
    </style>    
    <script>
        xxx = false;
        function myClick(){
            var ventil = document.getElementById("ventil");
            var ventil_text = document.getElementById("ventil_text");

            if(xxx == false){
                ventil.style.color = "#0f0";
                ventil_text.innerText ="offen";
            } else {
                ventil.style.color = "#f00";
                ventil_text.innerText ="geschlossen";
            }
            xxx = !xxx;
        }
    </script>
</head>
<body>
    <span id="ventil"><a href="https://arduino.cc"><span id="ventil_text">offen</span></a></span>
    <button onclick="myClick()">click me</button>
</body>
</html>

Tommy56 · April 13, 2025, 6:05pm

Eigentlich sind es hier ja keine Links im eigentlichen Sinne, sondern von der Funktion her Buttons.

Gruß Tommy

HotSystems · April 13, 2025, 7:55pm

Hallo, danke für eure Tipps.
Ich werde jetzt erstmal meine Seiten daraufhin ändern, dass die "Links" funktionieren, die Farben sind nicht so wichtig. Das sind einige Seiten bzw. Links. Wenn das läuft, mache ich mich an die Farben. Da sind es weniger Seiten bzw. Links die angepasst werden müssen.
Nochmals danke, ich komme darauf zurück.

HotSystems · April 14, 2025, 4:16pm

Ok, das mit den Farben habe ich erstmal nach hinten geschoben.
Im nachfolgenden Bild sieht man, das es wohl wie von Tommy in #11 geschrieben, Buttons sind.
Da würde ich mich dann nochmals über einen Tipp freuen, wie man das optisch (Hintergrund Farbe oder transparent) ändern kann.
Mein Versuch über den Style Änderungen zu bekommen, klappt erst mal nicht.
Da fehlen mir leider die entsprechenden Kenntnisse.
Geht das überhaupt über den Style und wenn ja, an welcher Stelle.
Mein aktueller HTML für die 4 Zeilen.

document.querySelector('#wert' + 5).innerHTML = "<a href='//192.168.100.209/wasserstop.html'>"+array[5].wert+"</a>" ;
document.querySelector('#wert' + 6).innerHTML = (array[6].wert) ;
document.querySelector('#wert' + 6).style.color = array[6].wert == 'OK' ? 'green' : 'red';
document.querySelector('#wert' + 7).innerHTML = "<a href='//192.168.100.202/OutDoorLight.html'>"+array[7].wert+"</a>" ;
document.querySelector('#wert' + 8).innerHTML = "<a href='//192.168.100.203/Drainagepumpe.html'>"+array[8].wert+"</a>" ;

Rintin · April 14, 2025, 4:40pm

Hast du mal ein wenig mehr Kontext? So HTML oder so?

noiasca · April 14, 2025, 4:40pm

du zeigst 5 Zeilen JavaScript.
wir bräuchten das ganze HTML und das Stylesheet (in der Annahme, dass die unteren "Buttons" auch über Klassen gestyled wurden)

edit: zu spät, du bist vermutlich bei @Rintin eh besser aufgehoben...

HotSystems · April 14, 2025, 4:42pm

Bin grad busy, schicke ich später.
Danke

HotSystems · April 14, 2025, 8:41pm

@Rintin , @noiasca
Hier der komplette Code (Ursprung fips) des oberen Teils, ohne die unteren 4 Schaltflächen.

<html lang="de">
   <head>
      <meta charset="iso-8859-1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>mySmartHome Haus-Monitor</title>
      <link rel="stylesheet" href="style32.css">
      <style>
         main {
         background-color: #03deff;
         border: 0.5em solid #03deff;
         box-shadow: 0.3em 0.3em 0.2em #616362;
         font-size: 2em;
         }
		 a {
		 background-color: tomato;
		 }
      </style>
      <script>
         function list() {
           fetch('lots').then(function (response) {
             return response.json();
           }).then(function (json) {
             for (var i = 0; i < json.length; i++) {
               var listItem = document.createElement('span');
               listItem.innerHTML = '<strong>' + json[i].name + '</strong>';
               document.getElementById('links').appendChild(listItem);
             }
             for (var i = 0; i < json.length; i++) {
               var listItem = document.createElement('span');
               listItem.setAttribute('id', 'wert' + i);
               document.getElementById('rechts').appendChild(listItem);
             }
           });
         }
         
		 document.addEventListener('DOMContentLoaded', list);
         function update() {
		 
           fetch('lots').then(function (response) {
             return response.json();
           }).then(function (array) {
             for (var i = 0; i < 5; i++) {
			   if (array[0].wert != '') document.querySelector('#wert' + i).innerHTML = (array[i].wert);
			   document.querySelector('#wert' + i).style.color = array[i].wert == 'offen' ? 'red' : 'black';	
			 }
 			 
			 document.querySelector('#wert' + 5).innerHTML = "<a href='//192.168.100.209/wasserstop.html'>"+array[5].wert+"</a>" ;
			 
			 document.querySelector('#wert' + 5).style.color = array[5].wert == 'offen' ? 'green' : 'red';
 			 document.querySelector('#wert' + 6).innerHTML = (array[6].wert) ;
			 document.querySelector('#wert' + 6).style.color = array[6].wert == 'OK' ? 'green' : 'red';
			
			 document.querySelector('#wert' + 7).innerHTML = "<a href='//192.168.100.202/OutDoorLight.html'>"+array[7].wert+"</a>" ;
			 
			 document.querySelector('#wert' + 7).style.color = array[7].wert == 'EIN' ? 'red' : 'blue';

			 document.querySelector('#wert' + 8).innerHTML = "<a href='//192.168.100.203/Drainagepumpe.html'>"+array[8].wert+"</a>" ;
			 
			 document.querySelector('#wert' + 8).style.color = array[8].wert == 'EIN' ? 'red' : 'blue';
			 document.querySelector('#wert' + 9).innerHTML = (array[9].wert) ;
			 document.querySelector('#wert' + 9).style.color = array[9].wert == 'OK' ? 'green' : 'red';			 
			 document.querySelector('#wert' + 10).innerHTML = (array[10].wert) + ' dBm' ;
			 document.querySelector('#wert' + 11).innerHTML = (array[11].wert) ;
           });
		 }
         document.addEventListener('DOMContentLoaded', update);
         setInterval(update, 2000); // Interval einstellen  in ms -->
      </script>
	</head>
   <body>
      <h1>mySmartHome Haus-Monitor</h1>
	  
      <main>
         <section id="links">     
         </section>
         <section id="rechts">
         </section>
      </main>
   </body>
</html>

code

Rintin · April 14, 2025, 8:54pm

Kannst du auch lots anhängen?

HotSystems · April 14, 2025, 9:13pm

Hier die Datei mit "lots". Auch das ist eine modifizierte "fips" Datei.

void daten_übergabe()                                     // Funktionsaufruf "daten_übergabe();" muss im Setup eingebunden werden
{
  server.on("/lots", handleListDevice);
}

void handleListDevice() {
  const byte anzahl = menuezahl;

  tempPart[0] =   "inaktiv";
  tempPart[1] =   "inaktiv";
  tempPart[2] =   "inaktiv";
  tempPart[3] =   "inaktiv";
  tempPart[4] =   "inaktiv";
  tempPart[6] =   Alarm_Text[id7Value];                 // Vorratsraum Feuchte  7.1 - 7.7
  tempPart[7] =   Lampe_Text[id8Value];                 // Außenlampe           8.1 - 8.2

  int str_len = strValue.length() + 1;
  char char_array[str_len];
  strValue.toCharArray(char_array, str_len);

  if (id9Value == 0)
  {
    tempPart[8] =  Pumpe_Text[id9Value];                // Drainagepumpe 9.0 - 9.1
  }
  else
  {
    tempPart[8] = char_array;
  }

  if (is209Visible)
  {
    tempPart[0] = "visible";
    tempPart[5] = Valve_Text[id6Value];                 // Wassertank-Ventil    6.1 - 6.2
  }
  else
  {
    tempPart[0] = "not visible";
    tempPart[5] = "Außer Betrieb";
  }
  tempPart[9] =  Alarm_Text[id10Value];                 // Systemzustand 10.1 - 10.7

  String strValue1 = String(WiFi.RSSI());
  int str_len1 = strValue1.length() + 1;
  char char_array1[str_len1];
  strValue1.toCharArray(char_array1, str_len1);

  tempPart[10] =  char_array1;   // (char *) WiFi.RSSI(); //"-36 dBm";    //WiFi.RSSI();
  tempPart[11] =  Version;

  if (anzahl == menuezahl) {
    String temp = "[";
    for (int i = 0; i < anzahl; i++ ) {
      if (temp != "[") temp += ',';
      temp += (String)"{\"name\":\"" + dsname[i] + "\",\"wert\":\"" +  tempPart[i] + "\"}";
    }
    server.send(200, "application/json", temp += "]");
  }
  else {
#ifdef espDebug
    Serial.println("Die Anzahl Felder zu Daten stimmt nicht überein.");
#endif
    server.send(200, "application/json", "[{\"name\":\"Fehler Anzahl Daten\",\"wert\":\"\"}]");
  }
}

code

Rintin · April 15, 2025, 10:25pm

Hatte jetzt nicht deine style32.css... hab da mal die Einträge in den section als display:block angenommen.

Hab da mal ein wenig mit den Links gebastelt:

Summary

<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="iso-8859-1" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>mySmartHome Haus-Monitor</title>
      <link rel="stylesheet" href="style32.css" />
      <style>
         main {
         background-color: #03deff;
         border: 0.5em solid #03deff;
         box-shadow: 0.3em 0.3em 0.2em #616362;
         font-size: 2em;
         }
		 a {
		 background-color: tomato;
		 }


        #links span {
            display:block;
            padding-top: 2px;
            padding-bottom: 2px;
        }

        #rechts > span {
            display:block;
            padding-top: 2px;
            padding-bottom: 2px;
        }

        #rechts a {
            display: block;
            right: 0px;
            left: 0px;
            background-color: cadetblue;
            border: 2px solid blueviolet;
            border-radius: 5px;
            text-decoration: none;
            color: yellow;
        }

      </style>
      <script>
         urls = {
            5: "//192.168.100.209/wasserstop.html",
            7: "//192.168.100.202/OutDoorLight.html",
            8: "//192.168.100.203/Drainagepumpe.html"
         };
         function makeLink(node, url) {
            var a = document.createElement('a');
            node.after(a);
            node.parentNode.removeChild(node);
            a.appendChild(node);
            a.href = url;
         }

         function list() {
           fetch('lots').then(function (response) {
             return response.json();
           }).then(function (json) {
             for (var i = 0; i < json.length; i++) {
               var listItem = document.createElement('span');
               listItem.innerHTML = '<strong>' + json[i].name + '</strong>';
               document.getElementById('links').appendChild(listItem);
             }
             for (var i = 0; i < json.length; i++) {
               var listItem = document.createElement('span');
               listItem.setAttribute('id', 'wert' + i);
               document.getElementById('rechts').appendChild(listItem);

               if(i in urls){
                makeLink(listItem, urls[i]);
               }
             }
             update();
           });
         }
         
		 document.addEventListener('DOMContentLoaded', list);
         function update() {
		 
           fetch('lots').then(function (response) {
             return response.json();
           }).then(function (array) {
             for (var i = 0; i < 5; i++) {
			   if (array[0].wert != '') document.querySelector('#wert' + i).innerHTML = (array[i].wert);
			   document.querySelector('#wert' + i).style.color = array[i].wert == 'offen' ? 'red' : 'black';	
			 }
 			 
			 //document.querySelector('#wert' + 5).innerHTML = "<a href='//192.168.100.209/wasserstop.html'>"+array[5].wert+"</a>" ;
             document.querySelector('#wert' + 5).innerText = array[5].wert;
			 
			 document.querySelector('#wert' + 5).style.color = array[5].wert == 'offen' ? 'green' : 'red';
 			 document.querySelector('#wert' + 6).innerHTML = (array[6].wert) ;
			 document.querySelector('#wert' + 6).style.color = array[6].wert == 'OK' ? 'green' : 'red';
			
			 //document.querySelector('#wert' + 7).innerHTML = "<a href='//192.168.100.202/OutDoorLight.html'>"+array[7].wert+"</a>" ;
             document.querySelector('#wert' + 7).innerText = array[7].wert;
			 
			 document.querySelector('#wert' + 7).style.color = array[7].wert == 'EIN' ? 'red' : 'blue';

			 //document.querySelector('#wert' + 8).innerHTML = "<a href='//192.168.100.203/Drainagepumpe.html'>"+array[8].wert+"</a>" ;
			 document.querySelector('#wert' + 8).innerText = array[8].wert;
			 
			 document.querySelector('#wert' + 8).style.color = array[8].wert == 'EIN' ? 'red' : 'blue';
			 document.querySelector('#wert' + 9).innerHTML = (array[9].wert) ;
			 document.querySelector('#wert' + 9).style.color = array[9].wert == 'OK' ? 'green' : 'red';			 
			 document.querySelector('#wert' + 10).innerHTML = (array[10].wert) + ' dBm' ;
			 document.querySelector('#wert' + 11).innerHTML = (array[11].wert) ;
           });
		 }
         //document.addEventListener('DOMContentLoaded', update);
         setInterval(update, 2000); // Interval einstellen  in ms -->
      </script>
	</head>
   <body>
      <h1>mySmartHome Haus-Monitor</h1>
	  
      <main>
         <section id="links">     
         </section>
         <section id="rechts">
         </section>
      </main>
   </body>
</html>

Sieht dann bei mir so aus:

Der Rahmen und der Hintergrund ist sicher noch optimierungsfähig.

Topic		Replies	Views
Zeilenumbruch auf Webserver funktioniert nicht Deutsch	32	312	December 17, 2024
ESP32 ESPAsyncWebServer - html auslagern Deutsch	87	1177	March 18, 2025
HTML / Script question Networking, Protocols, and Devices	41	512	October 2, 2024
ESP32 web browser does not get the right string Networking, Protocols, and Devices	12	203	February 17, 2025
DHT11 Messwerte werden vom ESP8266.WIFI auf der HTML-Seite nicht aktualisiert Deutsch	224	1736	August 9, 2025

ESP8266, HTML: Link per Text auf Webseite aufrufen

Related topics