Auto refresh html in void loop()

this might be a fruently asked question, but i stll can't figure out a way to refresh my web server in void loop()
here's the code


#include <dummy.h>

#include <ArduinoJson.h>
#include "FS.h"
#include <LittleFS.h>
/*------------------*/
#include <ESP8266WiFi.h>
#include <WiFiClient.h> 
#include <ESP8266WebServer.h>

#include <ESP8266HTTPClient.h>

#ifndef APSSID
#define APSSID "******"
#define APPSK  "*****"
#endif

/* Set these to your desired credentials. */
const char *ssid = APSSID;
const char *password = APPSK;
const char* PARAM_INPUT_1 = "input1";

String Tsetarduino;
String Tsetarduino2;
String Tsetarduino3;

const int pingPin = 5; //D1 trig
int inPin = 4; //D2 echo

int relay_in = 16; //D3
int relay_in14 = 14; //D4
int counter = 0;
boolean LED1_State = false;
boolean LED1_State_out = false;
boolean State_out = false;

static unsigned long ledCameOn = 0;
static unsigned long ledCameOut = 0;
//int counterValue;
#define MAX_STRING_LENGTH  7
 
ESP8266WebServer server(80); // establishing server at port 80 (HTTP protocol's default port)

// Writing a simple HTML page.
char HTML[] = "<html><body>"
"<style> body { height: 100%; background-color: #efefef; font-family: Arial, Helvetica, Sans-Serif; }"
"input[type=text] {  font-size:18px; padding:10px 10px 10px 5px;display:block; width:300px; border:none;border-bottom:1px solid #757575;}"
" input[type=submit]{ background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer;}"
"#screenFiller {     width: 100vw; height: 100vh;}"

"#dotRed {"
 " height: 35px;"
 " width: 35px;"
 " background-color: #bbb;"
 " border-radius: 50%;"
  "display: inline-block;}"
"</style>"
"<div id=\"screenFiller\" style=\" width: 960px;\">"
"<form METHOD=\"post\" action=\"/getva\" target=\"hidden-form\"> "
"<label>Time ON(s) :</label> <input type=\"text\" name=\"tON\" ><br> "
"<label> Time OFF(s) : </label><input type=\"text\" name=\"tOFF\" ><br>"
"<label> Distance(cm) : </label><input type=\"text\" name=\"dd\" ><br>"
"<input type=\"submit\" value=\"Submit\" > </form> "
 " <span id=\"dotRed\"></span>"
 "</div>"
"</body></html>"; // --> Simple HTML page

/*------------------------------------*/
/*------------------------------------*/
// This function will be called whenever anyone requests 192.168.4.1 within the local area connection of this ESP module.
void handleRoot() 
{
 
  server.send(200, "text/html",HTML);

}

// This function will be called whenever anyone requests 192.168.4.1/toggle within the local area connection of this ESP module.


void handlePostForm()
{

    Tsetarduino = server.arg(0);
    Tsetarduino2 = server.arg(1);
    Tsetarduino3 = server.arg(2);
     


 server.send(200,"text/html",HTML);

}


void setup() {

  Serial.begin(115200);
  Serial.println();

  Serial.print("Configuring access point...");
  /* You can remove the password parameter if you want the AP to be open. */
  WiFi.softAP(ssid, password); // --> This line will create a WiFi hotspot.

  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.on("/", handleRoot);
  server.on("/getva", handlePostForm);
  
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();

if (Tsetarduino > "100")
{
  // change background color of span in html and refresh the page
  
}
}}

`Blockquote`

is there any way i can change color of in void loop() section

the server does not have access to the web page, it reacts to HTTP requests coming from the web browser. Those requests are served by the handlers you've defined

  server.on("/", handleRoot);
  server.on("/getva", handlePostForm);

:arrow_right:︎ if the request is for the root of the web site, then handleRoot() is called
:arrow_right:︎ if the request is for /getva, then handlePostForm() is called

that's the only moment HTML is sent to the connected client (and then the client disconnects).

So if you want to change the color of something, you need to do that upon the next request and have the necessary code in the handlers.

if you want this to happen somewhat automagically, you could have some javascript in the HTML that asks the page for an auto-refresh every 15 seconds for example. This way the page gets refreshed often and you can serve a new page with the new color.

there are other technics, but based on your question, that would probably be the easiest answer to get.

I believe a request for refresh must come from the client browser. You might try AJAX.

EDIT:
AJAX is a little more complex than just updating the whole page. But, it has the advantage of being able to update only the fields desired.

<head>
  <meta http-equiv="refresh" content="30">
</head>

do you want:

  1. shut down server and start him again
  2. save new copy of .html file in File system
  3. force the loaded to browser page to reload
    ???