ESP32 wifi <button onclick> script help please

Hello all,
I need some help with writing some scripting language to work with a button click. The project is based on a home appliance control system.

#include <WiFi.h>
const char* ssid = "...........";
const char* password = ".........";
// Creates a server that listens for incoming connections on the specified port.
WiFiServer server(80);

void setup()
{
  Serial.begin(115200);
  pinMode(5, OUTPUT);
  pinMode(16, OUTPUT);
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
  }
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
  WiFiClient client = server.available();   // listen for incoming clients
  if (client) {
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            // client.println("HTTP/1.1 200 OK");
            client.println("HTTP/10.2.1 200 OK");
            // 10.2.1 200 OK
            // The request has succeeded. The information returned with the response is dependent on the method used in the request, for example:
            // GET an entity corresponding to the requested resource is sent in the response;
            // HEAD the entity-header fields corresponding to the requested resource are sent in the response without any message-body;
            // POST an entity describing or containing the result of the action;
            // TRACE an entity containing the request message as received by the end server.
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print("<title>Home appliances</title>");
            client.print("<p1>Selection</p1><br>");
            client.print("<ul><li> Lights <a href=\"/H\"> On </a> <li> TV<a href= \"/G\"> On  </a> </ul>");
.         
            client.print("<button onclick= myFunction();>Lights On</button>");
            
      //      <script>
        //    class myFunction(); / <script>
            
            //client.print("Lights  <a href= \"/H\"> On  </a> <br>");
            //client.print("Lights  <a href= \"/L\"> Off </a> <br>");
            //client.print("TV      <a href= \"/G\"> On  </a> <br>");
            //client.print("TV      <a href= \"/O\"> Off </a> <br>");
            client.println();
            break;
          }
          else {
            currentLine = "";
          }
        }
        else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        if (currentLine.endsWith("GET /H")) {
          digitalWrite(5, HIGH);
          delay(1000);
          digitalWrite(5, LOW);
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(5, LOW);
        }
        if (currentLine.endsWith("GET /G")) {
          digitalWrite(16, HIGH);
          delay(1000);
          digitalWrite(16, LOW);
        }
        if (currentLine.endsWith("GET /O")) {
          digitalWrite(16, LOW);

        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
  }
}

the HTML you generate looks like this:

<title>Home appliances</title>
<p1>Selection</p1><br>
<ul><li> Lights <a href="/H"> On </a> <li> TV<a href= "/G"> On  </a> </ul>
<button onclick= myFunction();>Lights On</button>

it does not conform to a standard HTML document. it would be better as

<!DOCTYPE HTML>
<HTML LANG="EN">
 <HEAD>
  <META CHARSET="UTF-8">
  <TITLE>Home appliances</TITLE>
 </HEAD>
 <BODY>
	 Selection<br>
	 <ul><li> Lights <a href="/H"> On </a> <li> TV<a href= "/G"> On  </a> </ul>
	 <button onclick= myFunction();>Lights On</button>
</BODY>
</HTML>

have you checked what you get back in currentLine ?

I believe I get back the char value in ssid. I currently having a problem getting this part of the code to comply.

            client.print("<button onclick= myFunction();>Lights On</button>");
            
            <script>
             myFunction(){"hello"} / <script>  // expected primary-expression before '<' token

has a tutorial that that shows the basics

Another way to create a webinterface is ESP-DASH.
The design of the created webpage can't be modified but all HTML-stuff is done in the backgkround. Your programming stays all in C+-code.

There is a pro-Version for $50 that offers more functions and the ability to rearrange the order of the elements like sliders buttons etc.

best regards Stefan

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.