javascript / ESP8266 - 尝试使用滑块移动两个伺服系统

Question

我正在尝试使用带有两个伺服器的 ESP8266，通过网络界面的滑块来控制伺服器。 滑块在那里，第一个滑块可以完美地移动第一个伺服器，不幸的是第二个滑块不能移动第二个伺服器。

这是 arduino 上的代码：

 
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
//----------------------------------------Include the Servo Library
#include <Servo.h>

#include "PageIndex.h"; //--> Include the contents of the User Interface Web page, stored in the same folder as the .ino file

#define LEDonBoard 2  //--> Defining an On Board LED, used for indicators when the process of connecting to a wifi router
#define ServoPort D1    //--> Defining Servo Port
#define ServoPort2 D3    //--> Defining Servo Port

//----------------------------------------SSID and Password of your WiFi router
const char *ssid = "wifi_router";
const char *password = "wifi_password";
//----------------------------------------

Servo myservo;  //--> create servo object to control a servo
Servo myservo2;  //--> create servo2 object to control a servo2

ESP8266WebServer server(80);  //--> Server on port 80

//----------------------------------------This routine is executed when you open NodeMCU ESP8266 IP Address in browser
void handleRoot() {
 String s = MAIN_page; //Read HTML contents
 server.send(200, "text/html", s); //Send web page
}
//----------------------------------------

//----------------------------------------Procedure for handling servo control
void handleServo(){
  String POS = server.arg("servoPOS");
  int pos = POS.toInt();
  myservo.write(pos);   //--> Move the servo motor according to the POS value
  delay(15);
  Serial.print("Servo Angle:");
  Serial.println(pos);
  server.send(200, "text/plane","");
}

void handleServo2(){
  String POS2 = server.arg("servoPOS2");
  int pos2 = POS2.toInt();
  myservo2.write(pos2);   //--> Move the servo2 motor according to the POS2 value
  delay(15);
  Serial.print("Servo2 Angle:");
  Serial.println(pos2);
  server.send(200, "text/plane","");
}
//----------------------------------------
//----------------------------------------Setup----------------------------------------
void setup() {
  Serial.begin(115200);
  delay(1000);
  
  WiFi.begin(ssid, password); //--> Connect to your WiFi router
  Serial.println("");
    
  pinMode(LEDonBoard,OUTPUT); //--> On Board LED port Direction output
  digitalWrite(LEDonBoard, HIGH); //--> Turn off Led On Board

  myservo.attach(ServoPort); //--> attaches the servo on D1 to the servo object
  myservo2.attach(ServoPort2); //--> attaches the servo on D1 to the servo object
  //----------------------------------------Wait for connection
  Serial.print("Connecting");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    //----------------------------------------Make the On Board Flashing LED on the process of connecting to the wifi router.
    digitalWrite(LEDonBoard, LOW);
    delay(250);
    digitalWrite(LEDonBoard, HIGH);
    delay(250);
    //----------------------------------------
  }
  //----------------------------------------
  digitalWrite(LEDonBoard, HIGH); //--> Turn off the On Board LED when it is connected to the wifi router.
  //----------------------------------------If connection successful show IP address in serial monitor
  Serial.println("");
  Serial.print("Successfully connected to : ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  //----------------------------------------

  //----------------------------------------Initialize Webserver
  server.on("/",handleRoot);  //--> Routine to handle at root location. This is to display web page.
  server.on("/setPOS",handleServo); //--> Sets servo position from Web request
  server.on("/setPOS2",handleServo2); //--> Sets servo position from Web request
  server.begin();  
  Serial.println("HTTP server started");
}
//------------------------------------------------------------------------------------
//----------------------------------------Loop----------------------------------------
void loop() {
 server.handleClient();
}
//------------------------------------------------------------------------------------

这是 .ino 文件附带的 PageIndex.h 文件。

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html {
        font-family: Arial;
        display: inline-block;
        margin: 0px auto;
        text-align: center;
      }
      
      .slidecontainer {
        width: 100%;
      }

      .slider {
        -webkit-appearance: none;
        width: 50%;
        height: 15px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
      }

      .slider:hover {
        opacity: 1;
      }

      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
      }

      .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
      }



 .slider2 {
        -webkit-appearance: none;
        width: 50%;
        height: 15px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
      }

      .slider2:hover {
        opacity: 1;
      }

      .slider2::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
      }

      .slider2::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
      }



      
    </style>
  </head>
  <body>

    <h1>NodeMCU ESP8266 / ESP12E Control Servo SG90</h1>
    <br><br>
    <div class="slidecontainer">
      <input type="range" min="0" max="180" value="90" class="slider" id="myRange">
      <p>Value : <span id="demo"></span></p>
    </div>



    <div class="slidecontainer">
      <input type="range" min="0" max="180" value="20" class="slider" id="myRange2">
      <p>Value : <span id="demo2"></span></p>
    </div>


    <script>

      function sendData(pos) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
          }
        };
        xhttp.open("GET", "setPOS?servoPOS="+pos, true);
        xhttp.send();
      } 
      var slider = document.getElementById("myRange");
      var output = document.getElementById("demo");
      output.innerHTML = slider.value;

      slider.oninput = function() {
        output.innerHTML = this.value;
        sendData(output.innerHTML);
      }
   
     </script>
     
     
<script>

  function sendData(pos) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
          }
        };
        xhttp.open("GET", "setPOS2?servoPOS2="+pos2, true);
        xhttp.send();
      } 
      var slider2 = document.getElementById("myRang2e");
      var output2 = document.getElementById("demo2");
      output2.innerHTML2 = slider2.value;

      slider2.oninput = function() {
        output2.innerHTML = this.value;
        sendData(output2.innerHTML);
      }
      
</script>


  </body>
</html>
)=====";

我尝试根据第一个伺服编写代码，将一些值从“servo”更改为“servo2”，但没有帮助。 在这里发现类似的问题： JavaScript 输出多个滑块的 html 范围滑块值 但仍然没有让它发挥作用...

非常感谢任何帮助。

谢谢