¿Por qué mi JavaScript no funciona en JSFiddle?
No puedo descubrir cuál es el problema con este JSFiddle .
HTML:
<input type="button" value="test" onclick="test()">
JavaScript:
function test(){alert("test");}
Y cuando hago clic en el botón, no pasó nada. La consola dice "prueba no definida"
He leído la documentación de JSFiddle; allí dice que se agrega código JS <head>y código HTML <body>(por lo que este código JS es anterior a html y debería funcionar).
Si no especifica la configuración de ajuste, el valor predeterminado es "onLoad". Esto da como resultado que todo JavaScript se incluya en una función que se ejecuta después de que se haya cargado el resultado. Todas las variables son locales para esta función, por lo que no están disponibles en el ámbito global.
Cambie la configuración de ajuste a "sin ajuste" y funcionará:
http://jsfiddle.net/zalun/Yazpj/1/
Cambié el marco a "Sin biblioteca" ya que no usas ninguna.
La función se define dentro de un controlador de carga y, por lo tanto, se encuentra en un alcance diferente. Como señala @ellisbben en los comentarios, puedes solucionar este problema definiéndolo explícitamente en el windowobjeto. Mejor aún, cámbielo para aplicar el controlador al objeto discretamente: http://jsfiddle.net/pUeue/
$('input[type=button]').click( function() {
alert("test");
});
Tenga en cuenta que aplicar el controlador de esta manera, en lugar de en línea, mantiene limpio su HTML. Estoy usando jQuery, pero puedes hacerlo con o sin un marco o usando un marco diferente, si lo deseas.
Hay otra manera, declara tu función en una variable como esta:
test = function() {
alert("test");
}
jsFiddle
Detalles
EDITAR (basado en los comentarios de @nnnnnn)
@nnnnnn:
¿Por qué decir
test =(sinvar) lo arreglaría?
Cuando defines una función como esta:
var test = function(){};
La función se define localmente, pero cuando define su función sin var:
test = function(){};
testse define en el windowobjeto que se encuentra en el ámbito de nivel superior.
¿Por qué funciona esto?
Como @zalun dice:
Si no especifica la configuración de ajuste, el valor predeterminado es "onLoad". Esto da como resultado que todo JavaScript se incluya en una función que se ejecuta después de que se haya cargado el resultado. Todas las variables son locales para esta función, por lo que no están disponibles en el ámbito global.
Pero si usas esta sintaxis:
test = function(){};
Tienes acceso a la función testporque está definida globalmente.
Referencias:
- https://stackoverflow.com/a/338053/3083093
- https://stackoverflow.com/a/5830423/3083093
Cambie la configuración de ajuste en el panel Marcos y extensiones a "Sin ajuste <body>"
