Change css form color from esp32 if statement

Question

I am fairly new to arduino and ESP though am very familiar with css and javascript.

I have an esp webserver that includes a button

client.print("<button style='background-color: #F30C0C; color:#000;'></button>");

but need it to change the css backbround-color when pin is reading HIGH

 if (c == '\n') {
 currentLineIsBlank = true;
 buffer = "";
 }
 else if (c == '\r') {
 if (buffer.indexOf("GET /?relay1") >= 0)
 relayPIN1read = digitalRead(relayPIN1);
 if (relayPIN1read == HIGH) {
 digitalWrite(relayPIN1, LOW);
 }
 if (relayPIN1read == LOW) {
 digitalWrite(relayPIN1, HIGH);
 }
 }
 }

Does any one know of any way to do this?

Answer 1

First print everything up to the colour. Then print the colour, which you change depending on the state of the pin. Then print the rest.

client.print("<button style='background-color: ");
if (digitalRead(PIN) == HIGH) {
 client.print("#0CF30C");
} else {
 client.print("#F30C0C");
}
client.print("; color:#000;'></button>");

• Ben: I did try that, but seamed to go HIGH and LOW as if it was in a 2 count loop.. but will give it another go... Thank you
• Majenko: @Ben You are sending a "toggle" command rather than a "set" or "reset" command. You should separate it out and use a similar system as the colour to change the command the button sends.
• Ben: dont know what i was going last time.. but that worked like a charm.. thanks very much for your time :)