Hallo ich habe eine "kleine" Anwendung für den esp8266 erstellt und (bisher)erfolgreich getestet. Jetzt möchte die farbliche Datstellung eines Button beim anklicken ändern, dazu habe ich folgenden Code eingegeben: <button id="F00" onclick="document.getElementById('F00').style.backgroundColor = '#FF0000';">F00</button> <button id="F00" onclick="document.getElementById('F00').style.backgroundColor = '#00FF99';">aus</button> als html -Datei (siehe Anhang) funktioniert die Farb-Änderung. Im (ESP8266-) Code funktioniert die Farb-Änderung leider nicht; als Webbrowser verwende ich Firefox (Vers. 49.0.1) Kann mir jemand weiterhelfen ?? Im Voraus besten Dank Günter
Dsa sollte mit dem ESP8266 nichts zu tun haben, denn ob der Browser den Code lokal von deiner Platte, oder per Netzwerk bekommt ist doch eigentlich egal. Eventuell unterscheiden sich die Sicherheitseinstellungen und du sperrst Javascript? Ansonsten ist auch der Code seltsam: zwei unteschiedliche Buttons mit gleicher ID? Welcher soll denn dann umgefärbt werden?
Hallo den Test mit der html-Datei habe ich mit dem Tool Notepad++ gemacht; dort funktioniert es... Ablauf: Click auf den Button F00 Button wird rot Click auf den Button aus Button wird grün JS ist nicht gesperrt (sonst würde es ja auch mit Notepad++ nicht funktionieren) Gruß Günter
Uwe hat Recht, das dürfte mit dem ESP ja rein gar nichts zu tun haben, das ist ja eine reine HTML/Javascript-Frage. Bei mir (ebenfalls Firefox 49.0 irgendwas) funktioniert das Ganze übrigens. Bis auf den bereits von Uwe erwähnten Fehler, dass Du für zwei Buttons die gleiche ID verwendest - daher wird bei mir immer nur die Hintergrundfarbe des ersten Buttons geändert.
Uwe N. schrieb: > Dsa sollte mit dem ESP8266 nichts zu tun haben, denn ob der Browser den > Code lokal von deiner Platte, oder per Netzwerk bekommt ist doch > eigentlich egal. > Eventuell unterscheiden sich die Sicherheitseinstellungen und du sperrst > Javascript? Was hat das mit JavaScript zu tun? > Ansonsten ist auch der Code seltsam: zwei unteschiedliche Buttons mit > gleicher ID? Das ist es.
1 | <button id="F00" onclick="document.getElementById('F00').style.backgroundColor = '#FF0000';">ein</button> |
2 | <button id="F01" onclick="document.getElementById('F01').style.backgroundColor = '#00FF99';">aus</button> |
Der Code funktioniert tatsächlich, sowohl von der lokalen Festplatte, als auch von einem lokalen Server (kein ESP8266) aus aufgerufen. Das id im zweiten Button ist überflüssig und eigentlich falsch. Vertausche mal die Reihenfolge der Buttons und du wirst sehen warum. Also hat es doch was mit dem ESP zu tun... Was liefert dir der Server denn? Schau dir das mal im Firefox den Quelltext der Seite an. Ist das der gleiche, wie loka aufgerufen? Uwe
@Ludwig: document.getElementById ist JavaScript Dein Vorschlag ist zwar korrekt, macht aber nicht, was guenter wollte. Er will offenbar den Button mit der Aufschrift F00 umfärben. Also muss es bei beiden Buttons heissen document.GetElementById('F00')... Die beiden gleichen ID's führen nur dazu, dass immer der erste Button umgefärbt wird. Deshalb gehts nicht mehr, wenn man die Buttons vertauscht. Uwe
ich habe jetzt einen weiteren Versuch unternommen... <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color = "blue"; </script> aber auch diese farbliche Darstellung funktioniert im esp8266 nicht Jedoch als html-Datei mit Notepad++ wird die Farbe richtig dargestellt ! Da fehlt mir wahrscheinlich noch eine generelle Einstellung (aber was ? bzw. wo ?) hat jemand noch eine gute Idee ? Gruß Günter
Hallo, der ESP hat damit direkt nichts zu tun, der schickt nur raus, was D da eingetippt hast. Was sagt denn der Quelltext, der wirklich übermittelt wird? Bei Firefox z.B. mit Rechtsklick ->Seitenquelltext anzeigen. Kommt wirlich das an, was Du meinst geschickt zu haben? Gruß aus Berlin Michael
:
Bearbeitet durch User
Du kannst einfach prüfen, ob JavaScript im Browser aktiviert ist:
1 | <noscript>Javascript ist aus!</noscript> |
2 | <script>document.writeln("JavaScript ist ein!");</script> |
Es könnte eine super Idee sein, zumindest die Dateien und Daten zu zeigen, die zwischen Mikrocontroller und Browser übertragen werden. Weißt du, wie man Webseiten im Browser debuggt?
Hallo Stefan dieses Beispiel habe ich im Internet gefunden und für meinen Test verwendet die Einfügungen im Code habe ich gekennzeichnet; ich verwende hierzu die Arduino-IDE ------------------------------------ Webseiten im Browser testen ?? Könntest du mir hierzu bitte entsprechende Hinweise zeigen ? Gruß Günter
Hallo,
1 | sResponse += "<button id=""F00"" onclick=""document.getElementById('F00').style.backgroundColor = '#FF0000'"">F00</button>"""; |
2 | sResponse += "<button id=""F00"" onclick=""document.getElementById('F00').style.backgroundColor = '#00FF99'"">aus</button>"""; |
was bringt Dich zu der Meinung, "" wäre die richtige Escape-Sequence für das Gänsefüßchen? 10 Zeilen darüber hast Du doch die Beispiele im Sourceode wie es richtig ist... Farbe geht nach dem Korrigieren bei mir, die für mich unklare Buttonzuordnung usw. habe ich ignoriert, nur schnell zum Test auf ein NodeMCU geflasht. Gruß aus Berlin Michael
:
Bearbeitet durch User
Hallo Michael zunächst mal vielen Dank für deine Hilfestellung ! Das mit den "Gänsefüßchen" habe ich im Code jetzt doch noch nicht hinbekommen...leider ! Um ehrlich zu sein..so recht weis ich jetzt doch nicht, wie ich deinen Hinweis umsetzen muss Könntest du so nett sein, den von dir korrigierten Code zurück-"posten", damit ich deine Korrektur bei mir einbringen kann ?? viele Grüße aus Oberfranken nach Berlin Günter
@Günter Das Problem ist, dass Du in Deinem Quelltext in Strings immer dann, wenn im HTML-Code ein Anführungszeichen erscheinen soll, "" (zwei Anführungszeichen) hingeschrieben hast - korrekt wäre aber \" (Backslash gefolgt von Anführungszeichen) Statt sResponse += "<button id=""F00"" onclick=""document.getElementById('F00').style.backgroundColor = '#FF0000'"">F00</button>"""; müsste es also z.B. heissen: sResponse += "<button id=\"F00\" onclick=\"document.getElementById('F00').style.backgroundColor = '#FF0000'\">F00</button>";
@guenter (Gast) Du bist nicht conny, oder? Wie auch immer, in c ist Text zwischen zwei " ein Stringliteral. Ein Stringliteral enthält einen C-String, und ein C-String ist ein Character Array (Liste aus Zeichen) bei welchem das Letzte zeichen den wert 0 hat, und Nullbyte genannt wird. Das heist "test" enthält die Zeichen 't', 'e', 's', 't' und '\0'. "abc" enthält 'a', 'b', 'c' und '\0'. Wenn 2 Stringliterale nacheinanderstehen werden diese wie ein einziges behandelt. "test" "abc" ist identisch zu "testabc" und enthält die Zeichen 't', 'e', 's', 't', 'a', 'b', 'c', '\0'. Escapesequenzen haben ein \ davor. Das Zeichen \ hat die Escapesequenz \\ , neue Linien haben die Escapesequenz '\n', Nullbytes '\0', etc. Eine Liste gibts hier: https://en.wikipedia.org/wiki/Escape_sequences_in_C Wenn du ein " in einem String brauchst, musst du das Zeichen escapen, weil es sonst das Stringliteral beenden würde. Für einen String mit den Zeichen '"', 't', 'e', 's', 't', '\"', '\0' würde man "\"test\"" schreiben.
:
Bearbeitet durch User
Hallo Joachim S (oyo) Hallo Daniel Albrecht (daniel-a) Die Erläuterungen in eueren beiden Beiträgen haben mir sehr geholfen; Es funktioniert jetzt bestens...also vielen Dank @Daniel: nein ich bin nicht conny !!! Gruß Günter
> Webseiten im Browser testen ?? > Könntest du mir hierzu bitte entsprechende Hinweise zeigen ? Mit der rechten Maustaste kannst du den Seitenquelltext anzeigen. Das ist immer der allererste Schrittt. Wenn du da den Fehler nicht siehst, dann benutze den Debugger. Fast jeder aktuelle Webbrowser öffnet den eingebauten Debugger, wenn du F12 drückst. Klicke dich da mal durch. Wenn der eingebaute Debugger nicht ausreicht, nimm Firefox mit dem Plugin "Firebug". Lies das: https://betterexplained.com/articles/how-to-debug-web-applications-with-firefox/ Der Artikel stimmt noch, bis auf die Angabe, dass der IE keinen Debugger hat. Inzwischen hat er einen.
Hallo, als Erklärung für meine "kurze" Antwort:
1 | sResponse = "<html><head><title>Demo für ESP8266 Steuerung</title></head><body>"; |
2 | sResponse += "<font color=\"#000000\"><body bgcolor=\"#d0d0f0\">"; |
3 | sResponse += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">"; |
4 | sResponse += "<h1>Demo für ESP8266 Steuerung</h1>"; |
5 | sResponse += "Funktion 1 schaltet GPIO2 und erzeugt eine serielle Ausgabe.<BR>";
|
6 | sResponse += "Funktion 2 erzeugt nur eine serielle Ausgabe.<BR>";
|
7 | sResponse += "<FONT SIZE=+1>"; |
8 | |
9 | // ######################################################################## |
10 | // diesen Teil habe ich für den "Farb-Test" eingefügt |
11 | // ######################################################################## |
12 | |
13 | sResponse += "<button id=""F00"" onclick=""document.getElementById('F00').style.backgroundColor = '#FF0000'"">F00</button>"""; |
14 | sResponse += "<button id=""F00"" onclick=""document.getElementById('F00').style.backgroundColor = '#00FF99'"">aus</button>"""; |
Im Code sind die Beispiele für das Escape ja vorhanden. Abschauen und kurz nachdenken oder konkret nachfragen sollte doch eigentlich möglich sein? Und zwar nicht nach den fehlenden Farben, sondern z.B. warum oben
1 | <font color=\"#000000\"> benutzt wird. |
Er hat ja am Anfang den Code gepostet, nur leider nicht den, der im Sketch stand. Gruß aus Berlin Michael
:
Bearbeitet durch User
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.