I am working on a project, where I display (for now random) values in table and then control (for now) led on pin 2.
I am having troubles with putting this two parts together.

Is here anyone who would be able to help me, point me in the right direction?


#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include "index.h"  //Web page header file
WebServer server(80);

int X1 = 0;
//Enter your SSID and PASSWORD
const char* ssid = "ESP";
const char* password = "123456789";
// This routine is executed when you open its IP in browser
void handleRoot() {
 String s = MAIN_page; //Read HTML contents
 server.send(200, "text/html", s); //Send web page
void handleADC() {
  String adcValue = String(X1);
 server.send(200, "text/plane", adcValue); //Send ADC value only to client ajax request

void Xvalue(){
  X1 = random(300);
// Setup
void setup(void){

  pinMode(output2, OUTPUT);
  digitalWrite(output2, LOW);
  Serial.println("Booting Sketch...");
//ESP32 As access point
  WiFi.mode(WIFI_AP); //Access Point mode
  WiFi.softAP(ssid, password);
  Serial.println("Connecting to ");
  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  server.on("/", handleRoot);      //This is display page
  server.on("/readADC", handleADC);//To get update of ADC Value only
  server.begin();                  //Start server
  Serial.println("HTTP server started");
// This routine is executed when you open its IP in browser
void loop(void){



const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
    <script src=""></script>
    <script src=""></script>
    <style>tab-table, th, td {border: 1px solid black;border-collapse:
collapse;text-align: center;}</style>

// buttons
  <div class="button"align="center">
    <button type="start" class="btn btn-success" style="margin:2%;
height:45px; width:28%; margin-top:40px;">Start</button>
    <button type="button" class="btn btn-primary"style="margin:2%;
height:45px; width:28%; margin-top:40px;">Pause</button>
    <button type="button" class="btn btn-danger"style="margin:2%;
height:45px; width:28%; margin-top:40px;">Reset</button>

// table
    <table style="margin-top:20px; width:92.8%; margin-left:3.6%; ">
        <th style="height:45px; width:40%">Name</th>
        <th style="height:45px; width:20%">X location</th>
        <th style="height:45px; width:20%">Y location</th>
        <td bgcolor="#D3D3D3" style="height:45px; width:40%">Location 1</td>

// Here I update number in tab, it is called adc because of some other code I used for this. Will change later
        <td bgcolor="#D3D3D3" style="height:45px; width:20%"><span id="ADCValue">0</span></td>
        <td bgcolor="#D3D3D3" style="height:45px; width:20%"><span
        <td style="height:40px; width:45%">Location 2</td>
        <td style="height:45px; width:20%">X</td>
        <td style="height:45px; width:20%">Y</td>
        <td bgcolor="#D3D3D3" style="height:45px; width:40%">Location 3</td>
        <td bgcolor="#D3D3D3" style="height:45px; width:20%">X</td>
        <td bgcolor="#D3D3D3" style="height:45px; width:20%">Y</td>


setInterval(function() {
  // Call a function repetatively with 2 Second interval
}, 2000); //2000mSeconds update rate
function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ADCValue").innerHTML =
      this.responseText;   // again, it is called adc because of some other code I used.
  };"GET", "readADC", true);

I am attaching how the http site looks like.

I would like to add something like “handle.button” function next to handle client.

Thank you for any ideas.