Pourquoi mon code JavaScript fonctionne-t-il localement mais pas sur JSfiddle.net ?

JavaScript ne fonctionne pas sur JSfiddle.net

Problème :

Le code fourni fonctionne correctement sur un site en direct mais échoue à exécuter sur JSfiddle.net, entraînant des erreurs de console telles que "ReferenceError: fillList n'est pas défini" et "ReferenceError: mySelectList n'est pas défini."

Explication :

Dans le code donné, les fonctions sont définies au sein d'une fonction onload. Bien que cela permette de référencer les fonctions au sein de cette fonction, elles ne sont pas accessibles globalement. Par conséquent, lorsque vous référencez ces fonctions à partir du code HTML en utilisant leurs noms globaux (par exemple, fillList() et mySelectList), JSfiddle ne peut pas les reconnaître.

Solutions :

Il existe trois solutions principales à ce problème :

a) Globaliser les fonctions :

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

Cette approche rend les fonctions globales mais n'est pas idéale car elle pollue le espace de noms global.

b) Utilisez JavaScript discret :

Définissez des fonctions en dehors de la fonction de chargement et attachez des écouteurs d'événements en utilisant uniquement JavaScript :

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

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

Cette séparation du HTML et du JavaScript est une bonne pratique.

c) Modifiez les paramètres de JSfiddle :

Modifiez les paramètres de JSfiddle sur "Pas d'enveloppement (tête ou corps)" pour empêcher le code d'être encapsulé dans une fonction onload. Cela permet aux fonctions d'être accessibles globalement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!