Why is My JavaScript Code Not Working on JSFiddle.net?

JavaScript Not Working on JSFiddle.net

The provided code works on a live site but fails to run on JSFiddle.net, generating errors such as "ReferenceError: fillList is not defined" and "ReferenceError: mySelectList is not defined."

Explanation:

The error occurs because the functions referenced in the HTML ("fillList()" and "findIt()") are defined within the "window.onload" function. In this context, these functions are only accessible within the onload function and cannot be referenced as global variables.

Solution:

To resolve this issue, you have three options:

1. Change Function Definition:

   • Modify the function definitions from "function blah(){}" to "window.blah = function(){};". This makes the functions global and accessible from the HTML.

2. Unobtrusive JavaScript:

   • Separate the JavaScript from the HTML and attach event handlers to DOM elements solely through JavaScript. This eliminates the reliance on global functions.

3. Adjust JSFiddle Settings:

   • Change the JSFiddle settings to "no wrap (body or head)," which prevents JSFiddle from enclosing the code in a window.onload function.

Recommendation:

Option b (unobtrusive JavaScript) is the recommended approach as it follows best practices for separating HTML from logic. This promotes maintainability and improves code reusability.

The above is the detailed content of Why is My JavaScript Code Not Working on JSFiddle.net?. For more information, please follow other related articles on the PHP Chinese website!