Why Does My JavaScript Code Work Locally But Not on JSfiddle.net?

JavaScript Not Running on JSfiddle.net

Problem:

The provided code functions correctly on a live site but fails to execute on JSfiddle.net, resulting in console errors such as "ReferenceError: fillList is not defined" and "ReferenceError: mySelectList is not defined."

Explanation:

In the given code, the functions are defined within an onload function. While this allows the functions to be referenced within that function, they cannot be accessed globally. As a result, when you reference these functions from the HTML using their global names (e.g., fillList() and mySelectList), JSfiddle cannot recognize them.

Solutions:

There are three primary solutions to this issue:

a) Globalize Functions:

<code class="javascript">window.fillList = function() {};
window.mySelectList = function() {};</code>

This approach makes the functions global but is not ideal as it pollutes the global namespace.

b) Use Unobtrusive JavaScript:

Define functions outside the onload function and attach event listeners using JavaScript alone:

<code class="javascript">function fillList() {}
function mySelectList() {}

window.onload = function() {
  var e = document.getElementById('elementId');
  e.addEventListener('click', fillList);
};</code>

This separation of HTML and JavaScript is a best practice.

c) Modify JSfiddle Settings:

Change the JSfiddle settings to "No Wrap (head or body)" to prevent the code from being wrapped in an onload function. This allows the functions to be globally accessible.

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