Pourquoi mes fonctions JavaScript ne sont-elles pas définies dans JSFiddle ?

Pourquoi JavaScript ne s'exécute pas sur JSFiddle : résolution des erreurs de définition de fonction

Lorsque vous essayez d'exécuter du code JavaScript sur JSFiddle, vous pouvez rencontrer des erreurs indiquant que les fonctions spécifiques ne sont pas définies. Cela se produit parce que JSFiddle encapsule le code dans une fonction onload, limitant la portée des définitions de fonctions.

Définition et référencement des fonctions

Dans le code fourni, des fonctions telles que fillList( ) et mySelectList() sont définis dans la fonction window.onload. Cela signifie que ces fonctions ne sont accessibles qu'à partir de cette fonction. Cependant, vous essayez de les référencer en tant que variables globales dans votre code HTML, ce qui entraîne des erreurs.

Options de résolution

Pour résoudre ce problème, vous disposez de trois options :

a) Modifier des fonctions en tant que variables globales

• La solution la plus simple et la plus rapide, mais pas idéale, consiste à modifier la syntaxe de définition de la fonction en :

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

b) JavaScript discret

• L'approche recommandée consiste à utiliser du JavaScript discret, qui sépare le HTML du JavaScript :

<code class="javascript">// attach event listener from within JavaScript
var mySelectList = document.getElementById('mySelectList');
mySelectList.addEventListener('change', function() {
    alert('Selection changed!');
});</code>

c) Modification des paramètres de JSFiddle

• JSFiddle vous permet de spécifier des options d'habillage. Modifiez le paramètre d'encapsulation sur « No wrap - Head or Body » pour empêcher le confinement du code dans une fonction de chargement.

Recommandation

L'option b) est fortement recommandée car il promeut les meilleures pratiques et l’organisation du code. En séparant le HTML du JavaScript, vous bénéficiez d'un plus grand contrôle et d'une plus grande flexibilité sur votre code.

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!