Pourquoi mon JavaScript ne fonctionne-t-il pas dans JSFiddle?

Je ne peux pas savoir quel est le problème avec ce JSFiddle .

HTML:

 

JavaScript:

 function test(){alert("test");} 

Et quand je clique sur le bouton, rien ne s’est passé. La console dit “test non défini”

J’ai lu la documentation de JSFiddle – elle indique que le code JS est ajouté à et que le code HTML est ajouté à (donc ce code JS est antérieur à HTML et devrait fonctionner).

La fonction est en cours de définition dans un gestionnaire de charge et a donc une scope différente. Comme @ellisbben le note dans les commentaires, vous pouvez résoudre ce problème en le définissant explicitement sur l’object window . Mieux encore, changez-le pour appliquer le gestionnaire à l’object de manière discrète: http://jsfiddle.net/pUeue/

 $('input[type=button]').click( function() { alert("test"); }); 

Notez que si vous appliquez le gestionnaire de cette manière, au lieu d’inclure, votre code HTML rest propre. J’utilise jQuery, mais vous pouvez le faire avec ou sans framework ou en utilisant un framework différent, si vous le souhaitez.

Si vous ne spécifiez pas le paramètre wrap, sa valeur par défaut est “onLoad”. Cela se traduit par l’exécution de tous les scripts JavaScript dans une fonction après le chargement du résultat. Toutes les variables sont locales à cette fonction donc indisponible dans le périmètre global.

Changez le paramètre d’emballage en “no wrap” et cela fonctionnera:

http://jsfiddle.net/zalun/Yazpj/1/

J’ai changé le framework pour “No Library” comme vous n’en utilisez pas.

Il y a une autre manière, déclarez votre fonction dans une variable comme ceci:

 test = function() { alert("test"); } 

jsfiddle


Détails

EDIT (basé sur les commentaires de @nnnnnn)

@nnnnnn:

pourquoi dire test = (sans var ) le corrigerait?

Lorsque vous définissez une fonction comme celle-ci:

 var test = function(){}; 

La fonction est définie localement, mais lorsque vous définissez votre fonction sans var :

 test = function(){}; 

test est défini sur l’object window qui se trouve au niveau supérieur.

pourquoi ça marche?

Comme @zalun dit:

Si vous ne spécifiez pas le paramètre wrap, sa valeur par défaut est “onLoad”. Cela se traduit par l’exécution de tous les scripts JavaScript dans une fonction après le chargement du résultat. Toutes les variables sont locales à cette fonction donc indisponible dans le périmètre global.

Mais si vous utilisez cette syntaxe:

 test = function(){}; 

Vous avez access au test fonction car il est défini globalement


Les références :

Modifier le paramètre de retour à la ligne dans le panneau Frameworks & Extensions en “No wrap-in

Votre code ne pose aucun problème. Choisissez l’extension onLoad () du côté droit.

   
 Select OnDomready 

HTML:

  

JavaScript:

 addEventListener('load', init, false); function init() { oInput = document.getElementById('dButton'); oInput.onclick = test; } function test(){ alert("test"); }