Esp8226 webserver :javascript is throwing error message: "Uncaught ReferenceError: Sweeping is not defined at HTMLDivElement.onmouseover ((index):1)"

Question

我想远程控制我的 ledstrip，所以我在我的 esp8226 中使用了互联网功能。我在 visual code studio 中编程（我的代码在那里工作）并将代码复制粘贴到 arduino ide。问题是它的 javascript 部分不起作用。

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);
}

这是网页给我的错误信息： “ Uncaught ReferenceError: Sweeping is not defined at HTMLDivElement.onmouseover ((index):1) “

Answer 1

您返回的 HTML 看起来不错，但您没有包含任何换行符或分号，因此生成的 JavaScript 将有错误并且不会被解析...因此函数将是未定义的.

该代码：

HTML += "       if(document.getElementsByClassName ('Fast')[0].checked){";
HTML += "         url+=`&speed=0`";
HTML += "         speed = 1";
HTML += "       }";

将收到：

if(document.getElementsByClassName ('Fast')[0].checked){url+=`&speed=0`speed = 1}

并且会导致错误...因为 JavaScript 需要将每个语句分开...相反应该是：

if(document.getElementsByClassName ('Fast')[0].checked){
    url+=`&speed=0`
    speed = 1
}

所以在您的代码中，只需将 \n 放在任何一行的末尾：

HTML += "       if(document.getElementsByClassName ('Fast')[0].checked){\n";
HTML += "         url+=`&speed=0`\n";
HTML += "         speed = 1\n";
HTML += "       }\n";

并且应该有效。

Esp8226 webserver :javascript is throwing error message: "Uncaught ReferenceError: Sweeping is not defined at HTMLDivElement.onmouseover ((index):1)"

Esp8226 webserver :javascript is throwing error message: "Uncaught ReferenceError: Sweeping is not defined at HTMLDivElement.onmouseover ((index):1)"

html

javascript

arduino

esp8266