I wanted to remote control my ledstrip so I was using the internet feature in my esp8226. I programmed it in visual code studio (my code worked there) and copy pasted the code to arduino ide. The problem is that the javascript part of it doesn't work.
void Kamiels_world() {
// Build a String with all the HTML in it.
String HTML = "";
HTML += "<html>";
HTML += " <title>Kamiels world</title>";
HTML += " <link rel='shortcut icon' type='image/jpg' src='.\TropicLovepicca.jpg'";
HTML += " <head>";
HTML += " <center>";
HTML += " <h2> Test bestand project Kamiels world</h2>";
HTML += " </center> <br>";
HTML += " <center>";
HTML += " ";
HTML += " <p1> Mogelijk wordt deze code gebruikt voor het toekomstige prototype </p1>";
HTML += " </center>";
HTML += " <br>";
HTML += " <br>";
HTML += " <br>";
HTML += " <style>";
HTML += " ";
HTML += " .CardHolder{";
HTML += " display: flex;";
HTML += " flex-direction: row;";
HTML += " justify-content:center;";
HTML += " }";
HTML += " .pCard {";
HTML += " font-size: 20px;";
HTML += " }";
HTML += "";
HTML += " .Color {";
HTML += " width: 100px;";
HTML += " height: 70px;";
HTML += " }";
HTML += " .Checkbox{";
HTML += " ";
HTML += " ";
HTML += " ";
HTML += " Width: 30px;";
HTML += " height: 30px;";
HTML += " }";
HTML += " ";
HTML += " ";
HTML += " ";
HTML += " .LightBulbOff{";
HTML += " ";
HTML += " z-index: 2;";
HTML += " position: relative;";
HTML += " ";
HTML += "";
HTML += " }";
HTML += " .LightBulbOn{";
HTML += " ";
HTML += " ";
HTML += " position: absolute;";
HTML += " z-index: 1;";
HTML += " ";
HTML += " ";
HTML += " }";
HTML += " .ConfirmBulb{";
HTML += " margin-top:7%;";
HTML += " }";
HTML += " .card {";
HTML += " flex-grow: 0;";
HTML += " border-style: groove;";
HTML += " background: linear-gradient(120deg, #2811aa 0%, #a30404 100%);";
HTML += " width: 172px;";
HTML += " height: 240px;";
HTML += " background-color: white; /* #5c5d7a */";
HTML += " ";
HTML += " border-color:#000000; /*#ffc800*/";
HTML += " transition: all .2s linear;";
HTML += " }";
HTML += " .hover:hover{";
HTML += " border-color: crimson;";
HTML += " }";
HTML += " ";
HTML += " .dVulLED {";
HTML += " border-color:#000000;";
HTML += " }";
HTML += " .rainbow {";
HTML += " width: 155;";
HTML += " }";
HTML += " body{";
HTML += " background-image: linear-gradient(120deg, #2811aa 0%, #a30404 100%);";
HTML += " }";
HTML += " ";
HTML += " ";
HTML += " </style>";
HTML += " </head>";
HTML += "";
HTML += "";
HTML += "";
HTML += " <body>";
HTML += " <div class='CardHolder'>";
HTML += " <div class='TurnOff card hover'> ";
HTML += " <!-- formaat plaatje=";
HTML += " width: 155px;";
HTML += " height: 175px; -->";
HTML += " ";
HTML += " ";
HTML += " <center>";
HTML += " <p1 class='pCard'> Turn off</p1>";
HTML += " ";
HTML += " ";
HTML += " ";
HTML += " <!-- <img class='LightBulbOn LightBulb' src='.\LightOnVoorWebServer[4].png'> -->";
HTML += " <img class='LightBulbOff LightBulb' src='.\LightOffVoorWebServerkopie[2].png'>";
HTML += " </center>";
HTML += " ";
HTML += " <center>";
HTML += " <button class='ConfirmButton ConfirmBulb' onclick='LedOff()'> Confirm </button></center>";
HTML += " </div>";
HTML += "";
HTML += " <div class='card hover'> ";
HTML += " ";
HTML += " ";
HTML += " <center>";
HTML += " <p1 class='dRainbow pCard'> <span style='color: red'>R</span><span style='color:#f07838'>a</span><span style='color: yellow'>i</span><span style='color: green'>n</span><span style='color: #0cbcf7'>b</span><span style='color: blue'>o</span><span style='color: purple'>w</span></p1>";
HTML += " ";
HTML += " ";
HTML += " ";
HTML += " <!-- <img class='LightBulbOn LightBulb' src='.\LightOnVoorWebServer[4].png'> -->";
HTML += " <img class='rainbow' src='.\rainbow.png'>";
HTML += " </center>";
HTML += " <br>";
HTML += " ";
HTML += " <center>";
HTML += " ";
HTML += " <button style='margin-top: 7%;' class='ConfirmButton ' onclick='rainbow()'> Confirm </button></center>";
HTML += " </div>";
HTML += "";
HTML += "";
HTML += " <div class='dSweeping card hover' onmouseover='Sweeping()'</div>";
HTML += " ";
HTML += " <center>";
HTML += " <p1 class='pCard pSweeping aSweeping'> Sweeping </p1>";
HTML += " ";
HTML += " <label for='Color' </label>";
HTML += " <input type='color' class='Color' placeholder='C' value='#d10000' outline:>";
HTML += " <br><br>";
HTML += " ";
HTML += " <p2>Sweeping speed</p2> <br>";
HTML += " <input type='checkbox' class='Checkbox Slow' >";
HTML += " <input type='checkbox' class='Checkbox Medium' >";
HTML += " <input type='checkbox' class='Checkbox Fast' >";
HTML += " <br>";
HTML += " <img src='.\pijlen test2.png'>";
HTML += " </center>";
HTML += " <br>";
HTML += " <center> <button class='ConfirmButton' onclick='sendSweeping()'> Confirm </button></center>";
HTML += " </div>";
HTML += " <div class='dVulLED card hover'>";
HTML += " ";
HTML += " <center>";
HTML += " <p1 class='pCard'> VulLED </p1>";
HTML += " ";
HTML += " <label for='Color' </label>";
HTML += " <input type='color' class='Color' value='#ffc800' outline:>";
HTML += " <br><br>";
HTML += " ";
HTML += " <p2>Led brightness</p2> <br>";
HTML += " <input type='checkbox' class='Checkbox Low'>";
HTML += " <input type='checkbox' class='Checkbox Medium'>";
HTML += " <input type='checkbox' class='Checkbox Bright'>";
HTML += " <br>";
HTML += " <img src='.\pijlen test2.png'>";
HTML += " </center>";
HTML += " <br>";
HTML += " <center><button class='ConfirmButton' onclick='sendVulLED()' > Confirm </button></center>";
HTML += " </div>";
HTML += " </div>";
HTML += " <iframe width='0' src='.\TropicLove.ogg' frameborder='0' allowfullscreen></iframe> ";
HTML += " <script>";
HTML += " var ip = '192.168.2.209' ";
HTML += " function LedOff(){";
HTML += " var url = `http://${ip}/api/LedOff`";
HTML += " fetch(url,";
HTML += " {";
HTML += " method: 'POST'";
HTML += " }).then(result => {";
HTML += " ";
HTML += " })";
HTML += " .catch(error => {";
HTML += " ";
HTML += " })";
HTML += " } ";
HTML += " function sendSweeping(){";
HTML += " const color = document.getElementsByClassName ('dSweeping')[0].querySelector('.Color').value";
HTML += " const r = parseInt(color.substr(1,2), 16)";
HTML += " const g = parseInt(color.substr(3,2), 16)";
HTML += " const b = parseInt(color.substr(5,2), 16)";
HTML += " var url = `http://${ip}/api/Sweeping?r=${r}&g=${g}&b=${b}`";
HTML += " var speed = 0";
HTML += " if(document.getElementsByClassName ('Slow')[0].checked){";
HTML += " url+=`&speed=120`";
HTML += " speed = 1";
HTML += " }";
HTML += " if(document.getElementsByClassName ('Medium')[0].checked){";
HTML += " url+=`&speed=70`";
HTML += " speed = 1";
HTML += " }";
HTML += " if(document.getElementsByClassName ('Fast')[0].checked){";
HTML += " url+=`&speed=0`";
HTML += " speed = 1";
HTML += " }";
HTML += " ";
HTML += " if(speed == 0){";
HTML += " url+=`&speed=70` ";
HTML += " }";
HTML += " fetch(url,";
HTML += " {";
HTML += " method: 'POST'";
HTML += " }).then(result => {";
HTML += " ";
HTML += " })";
HTML += " .catch(error => {";
HTML += " ";
HTML += " })";
HTML += " }";
HTML += " var SweepingActive= false";
HTML += " const delay = ms => new Promise(res => setTimeout(res, ms));";
HTML += " async function Sweeping(){";
HTML += " var Sweeping = 'Sweeping'";
HTML += " var cSweeping = ''";
HTML += " if(SweepingActive) {return}";
HTML += " SweepingActive= true";
HTML += " for(var i= 0; i<8;i++){";
HTML += " for(var j= 0; j<8;j++){";
HTML += " ";
HTML += " if(i==j){";
HTML += " cSweeping+= `<span style='color: ${document.getElementsByClassName ('dSweeping')[0].querySelector('.Color').value}'>${Sweeping[i]}</span>`";
HTML += " }";
HTML += " else{";
HTML += " cSweeping +=Sweeping[j]";
HTML += " }";
HTML += " ";
HTML += " }";
HTML += " document.getElementsByClassName ('pSweeping')[0].innerHTML= cSweeping";
HTML += " await delay(200);";
HTML += " cSweeping = ''";
HTML += " }";
HTML += " var gnipeewS ='gnipeewS'";
HTML += " for(i= 1; i<8;i++){";
HTML += " for(j= 7; j>=0;j--){";
HTML += " ";
HTML += " if(i==j){";
HTML += " cSweeping+= `<span style='color: ${document.getElementsByClassName ('dSweeping')[0].querySelector('.Color').value}'>${gnipeewS[i]}</span>`";
HTML += " }";
HTML += " else{";
HTML += " cSweeping +=gnipeewS[j]";
HTML += " }";
HTML += " ";
HTML += " }";
HTML += " document.getElementsByClassName ('pSweeping')[0].innerHTML= cSweeping";
HTML += " await delay(200);";
HTML += " cSweeping = ''";
HTML += " }";
HTML += " SweepingActive = false";
HTML += " }";
HTML += " function sendVulLED(){";
HTML += " var color = document.getElementsByClassName ('dVulLED')[0].querySelector('.Color').value";
HTML += " const r = parseInt(color.substr(1,2), 16)";
HTML += " const g = parseInt(color.substr(3,2), 16)";
HTML += " const b = parseInt(color.substr(5,2), 16)";
HTML += " var url = `http://${ip}/api/VulLED?r=${r}&g=${g}&b=${b}`";
HTML += " if(document.getElementsByClassName ('Low')[0].checked){";
HTML += " url += `&bright=100`";
HTML += " }";
HTML += " if(document.getElementsByClassName ('Medium')[1].checked){";
HTML += " url += `&bright=150`";
HTML += " }";
HTML += " if(document.getElementsByClassName ('Bright')[0].checked){";
HTML += " url += `&bright=255`";
HTML += " }";
HTML += " fetch(url,";
HTML += " {";
HTML += " method: 'POST'";
HTML += " }).then(result => {";
HTML += " ";
HTML += " })";
HTML += " .catch(error => {";
HTML += " ";
HTML += " })";
HTML += " }";
HTML += " function rainbow(){";
HTML += " var speed = 0";
HTML += " var url = `http://${ip}/api/Rainbow?`";
HTML += " if(document.getElementsByClassName ('Slow')[0].checked){";
HTML += " url+=`&speed=120`";
HTML += " speed = 1";
HTML += " }";
HTML += " if(document.getElementsByClassName ('Medium')[0].checked){";
HTML += " url+=`&speed=70`";
HTML += " speed = 1";
HTML += " }";
HTML += " if(document.getElementsByClassName ('Fast')[0].checked){";
HTML += " url+=`&speed=0`";
HTML += " speed = 1";
HTML += " }";
HTML += " ";
HTML += " if(speed == 0){";
HTML += " url+=`&speed=70` ";
HTML += " }";
HTML += " fetch(url,";
HTML += " {";
HTML += " method: 'POST'";
HTML += " }).then(result => {";
HTML += " })";
HTML += " .catch(error => {";
HTML += " })";
HTML += " }";
HTML += " </script>";
HTML += " </body>";
HTML += "</html>";
// Send the string to the browser as HTML text
server.send(200, "text/html", HTML);
}
And this is the error message the webpages gives me: " Uncaught ReferenceError: Sweeping is not defined at HTMLDivElement.onmouseover ((index):1) "
Your returned HTML looks nice but you don't include any new line nor semicolon so the resulting JavaScript will have errors and won't be parsed... so functions will be undefined.
That code:
HTML += " if(document.getElementsByClassName ('Fast')[0].checked){";
HTML += " url+=`&speed=0`";
HTML += " speed = 1";
HTML += " }";
Will be received as:
if(document.getElementsByClassName ('Fast')[0].checked){url+=`&speed=0`speed = 1}
And will cause errors... because JavaScript need each statement to be separated... instead it should be:
if(document.getElementsByClassName ('Fast')[0].checked){
url+=`&speed=0`
speed = 1
}
So in your code just put \n at the end of any line:
HTML += " if(document.getElementsByClassName ('Fast')[0].checked){\n";
HTML += " url+=`&speed=0`\n";
HTML += " speed = 1\n";
HTML += " }\n";
And should work.