Mixing Arduino and Jvascript and HTML with together

Projects Discussion and Showcase Home Automation and Networked Objects
#1

Hello everyone

I want to mix java script and HTML and CSS codes with Arduino codes but, i don’t know why Arduino IDE sends me an error when I add javascript but, for adding HTML and CSS there is not any problem.
I put my codes here and I will really be appreciate anyone which understand what is the problem in these codes and fix it for me.

#include <ESP8266WiFi.h>
const char* ssid = “xxxx”;
const char* password = “xxxx”;

WiFiServer server(80);

void setup() {

Serial.begin(115200);
delay(10);

Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println(“WiFi connected”);

server.begin();
Serial.println(“Server started”);

Serial.println(WiFi.localIP());
}

void loop() {

WiFiClient client = server.available();
if (!client) {
return;
}

Serial.println(“new client”);
while (!client.available()) {
delay(1);
}

String req = client.readStringUntil(’\r’);
Serial.println(req);
client.flush();
String s;

s += “”;
s += “”;
s += " .slidecontainer { width: 60%;}.slider { -webkit-appearance: none; width: 100%; height: 25px; 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; background: #4CAF50; cursor: pointer;}.slider::-moz-range-thumb { width: 25px; height: 25px; background: #4CAF50; cursor: pointer;}";

s += “

Custom Range Slider

”;

s += “<input type=“range” min=“1” max=“5” value=“1” class=“slider” oninput=“myFunction(this.value)”>

Value: <span id=“demo”>

”;

s += “”;
function myFunction(val) {
switch (val) {
case “1”:
document.getElementById(“demo”).innerHTML = “OFF”;
break;

case “2”:
document.getElementById(“demo”).innerHTML = “I got position number 2”;
break;

case “3”:
document.getElementById(“demo”).innerHTML = “I need a break”;
break;

case “4”:
document.getElementById(“demo”).innerHTML = “I got number 4”;
break;

case “5”:
document.getElementById(“demo”).innerHTML = “This is the last position in range”;
break;

}
}
s += “< / script >”;

s += “< / body >”;
s += “< / html >”;

client.print(s);
delay(1);
Serial.println(“Client disconnected”);
}

#2

Just as you used this construct:

 s += "<script>";

to add the script tag, you need to do the same for the code that makes up the javascript function. You have tried to add it inline and the compiler is trying to interpret it as c++.

#3

amir2640:
I want to mix java script and HTML and CSS codes with Arduino codes...

You don't have to.
Read about using SPIFFS memory here.
Leo..

#4