Maison > interface Web > js tutoriel > Pourquoi mon code JavaScript fonctionne-t-il localement mais pas sur JSfiddle.net ?

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

Barbara Streisand
Libérer: 2024-10-31 21:55:02
original
571 Les gens l'ont consulté

Why Does My JavaScript Code Work Locally But Not on 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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal