web-dev-qa-db-fra.com

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

Je ne peux pas trouver quel est le problème avec ceci JSFiddle .

HTML:

<input type="button" value="test" onclick="test()">

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 - il est indiqué que du code JS est ajouté à <head> et le code HTML est ajouté à <body> _ (ce code JS est donc antérieur à HTML et devrait fonctionner).

javascripthtmljsfiddle
111
Larry Cinnabar

La fonction est définie dans un gestionnaire de charge et se trouve donc dans une portée différente. Comme @ellisbben le note dans les commentaires, vous pouvez résoudre ce problème en le définissant explicitement dans l'objet window. Encore mieux, changez-le pour appliquer le gestionnaire à l'objet de manière discrète: http://jsfiddle.net/pUeue/

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

Notez que l'application du gestionnaire de cette façon, au lieu d'être intégrée, garde votre code HTML propre. J'utilise jQuery, mais vous pouvez le faire avec ou sans framework ou en utilisant un framework différent, si vous le souhaitez.

60
tvanfosson

Si vous ne spécifiez pas le paramètre de bouclage, sa valeur par défaut est "onLoad". Cela a pour résultat que tout le JavaScript est encapsulé dans une fonction exécutée après le chargement du résultat. Toutes les variables sont locales à cette fonction et ne sont donc pas disponibles dans la portée globale.

Changez le paramètre d'habillage en "no wrap" et ça va marcher:

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

J'ai changé le cadre pour "Pas de bibliothèque" car vous n'en utilisez pas.

97
zalun

Il existe un autre moyen de déclarer votre fonction dans une variable comme celle-ci:

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'objet window qui se trouve dans la portée de niveau supérieur.

pourquoi ça marche?

Comme @zalun dire:

Si vous ne spécifiez pas le paramètre de bouclage, sa valeur par défaut est "onLoad". Cela a pour résultat que tout le JavaScript est encapsulé dans une fonction exécutée après le chargement du résultat. Toutes les variables sont locales à cette fonction et ne sont donc pas disponibles dans la portée globale.

Mais si vous utilisez cette syntaxe:

test = function(){};

Vous avez accès à la fonction test car elle est définie globalement

Références:

21
R3tep

Modifiez le paramètre d'habillage dans le panneau Frameworks & Extensions en "Pas d'habillage <body> "

3
Academia