Скачать или смотреть How to Fix the Uncaught ReferenceError: Sweeping is not defined Error on the ESP8266 Webserver

Discover how to resolve JavaScript errors when controlling LED strips with the ESP8266 webserver. A detailed guide to ensure smooth operation and functionality.
---
This video is based on the question https://stackoverflow.com/q/67587266/ asked by the user 'Kamiel Lankveld' ( https://stackoverflow.com/u/15955642/ ) and on the answer https://stackoverflow.com/a/67588169/ provided by the user 'ZeroWorks' ( https://stackoverflow.com/u/3656419/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Esp8226 webserver :javascript is throwing error message: "Uncaught ReferenceError: Sweeping is not defined at HTMLDivElement.onmouseover ((index):1)"

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the Problem

If you are using an ESP8266 webserver to control your LED strip remotely, you may encounter a common JavaScript error: Uncaught ReferenceError: Sweeping is not defined. This error typically indicates that the JavaScript function you are trying to invoke is not recognized in the current scope where it is being called.

You might see the error specifically when an HTML element triggers a JavaScript function on an event, such as a mouseover event. Below, we will walk through the possible causes and provide a detailed solution.

The Encountered Error

In your case, the error appears when hovering over a div configured with the following onmouseover event:

[[See Video to Reveal this Text or Code Snippet]]

The message indicates that the Sweeping() function is not defined when it is called. This often stems from issues in how the JavaScript code is being outputted as part of the HTML.

Analyzing the Solution

The problem arises from how the JavaScript code is concatenated into the HTML string in your Arduino sketch. In your existing implementation, the code snippets are concatenated without proper line breaks or semicolons, resulting in malformed JavaScript that the browser cannot parse correctly.

How to Fix the Issue

To address this issue, you need to ensure that each line of JavaScript code is properly formatted when constructing the HTML string. Here’s a step-by-step guide:

Step 1: Adding Line Breaks

Introduce \n (newline characters) at the end of each JavaScript statement when you build your HTML string. For example:

Instead of:

[[See Video to Reveal this Text or Code Snippet]]

You should format it as:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Review All JavaScript Code

Go through your entire JavaScript code within the HTML string and ensure that each statement ends with a semicolon and that there are line breaks. This helps prevent undefined functions and variables due to incomplete JavaScript statements.

For example:

Each if statement should be enclosed with curly braces {} and followed by a new line.

Each line of code should be reviewed to ensure valid formatting.

Final Implementation

Here’s a simplified version of how to properly build part of your JavaScript code:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By properly formatting your JavaScript code with line breaks and semicolons where applicable, you will avoid the Uncaught ReferenceError: Sweeping is not defined error and ensure that your ESP8266 webserver functions as expected. This small adjustment in your code can save a lot of debugging time and effort, allowing your project to flourish as intended!

Now go ahead and implement these changes, and watch your LED strip respond perfectly to your remote commands without encountering pesky JavaScript errors!