Почему мой JavaScript не работает в JSFiddle? - PullRequest
Новая
       49

Почему мой JavaScript не работает в JSFiddle?

111 голосов
/ 25 марта 2011

Я не могу выяснить, в чем проблема с этим JSFiddle .

HTML: 

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

JavaScript: 

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

А когда я нажимаю на кнопку - ничего не происходит.Консоль говорит «тест не определен»

Я прочитал документацию по JSFiddle - там написано, что код JS добавлен в <head>, а код HTML добавлен в <body> (поэтому этот код JS более раннийчем HTML и должен работать).

Ответы [ 7 ]

96 голосов
/ 29 апреля 2011

Если вы не укажете настройку обтекания, то по умолчанию будет «onLoad».Это приводит к тому, что весь JavaScript включается в функцию, запускаемую после загрузки результата.Все переменные являются локальными для этой функции, поэтому недоступны в глобальной области видимости.

Измените настройку переноса на «без переноса», и она будет работать:

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

Я переключил фреймворк на «Нет библиотеки», так как вы его не используете.

60 голосов
/ 25 марта 2011

Функция определяется внутри обработчика нагрузки и, следовательно, находится в другом объеме. Как отмечает @ellisbben в комментариях, вы можете исправить это, явно указав его для объекта window. Еще лучше изменить его, чтобы ненавязчиво применять обработчик к объекту: http://jsfiddle.net/pUeue/

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

Обратите внимание, что применение обработчика таким образом, вместо встроенного, сохраняет ваш HTML чистым. Я использую jQuery, но вы можете сделать это с или без фреймворка или использовать другой фреймворк, если хотите.

21 голосов
/ 26 февраля 2014

Есть еще один способ, объявить вашу функцию в переменной следующим образом: 

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

jsFiddle

Подробности

РЕДАКТИРОВАТЬ (на основе комментариев @nnnnnn)

@ nnnnnn:

зачем говорить test = (без var)бы это исправить?

Когда вы определяете функцию, подобную этой: 

var test = function(){};

Функция определяется локально, но когда вы определяете свою функцию без var: 

test = function(){};

test определено для объекта window, который находится в области верхнего уровня.

почему это работает?

Как @Залун скажет:

Если вы не укажете настройку обтекания, то по умолчанию будет "onLoad".Это приводит к тому, что весь JavaScript включается в функцию, запускаемую после загрузки результата.Все переменные являются локальными для этой функции, поэтому недоступны в глобальной области видимости.

Но если вы используете этот синтаксис: 

test = function(){};

У вас есть доступ к функции test, потому чтоэто определено глобально

Ссылки:

3 голосов
/ 10 августа 2014

Измените настройку обтекания на панели «Каркас и расширения» на «Без обтекания <body>»

0 голосов
/ 21 января 2016 
<script> 
function test(){
 alert("test");   
}
</script>

<input type="button" value="test" onclick="test()">
0 голосов
/ 27 октября 2015 
Select OnDomready

HTML: 

<input id="dButton" type="button" value="test"/>

JavaScript: 

addEventListener('load', init, false);

function init()
{
  oInput = document.getElementById('dButton');
  oInput.onclick = test;
}

function test(){
  alert("test");
}
0 голосов
/ 12 сентября 2014

Нет проблем с вашим кодом. Просто выберите расширение onLoad () с правой стороны.

...