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

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

HTML:

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

JavaScript:

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

Измените параметр обертки на "no wrap", и он будет работать:

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

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

Ответ 3

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

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

jsFiddle

Подробнее

EDIT (на основе комментариев @nnnnnn)

@nnnnnn:

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

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

var test = function(){};

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

test = function(){};

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

зачем это работает?

Как @zalun сказать:

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

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

test = function(){};

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

Ссылки:

Ответ 4

Измените параметр обхода на панели "Рамки и расширения" на "Нет обертки <body>"

Ответ 5

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

Ответ 6

<script> 
function test(){
 alert("test");   
}
</script>

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

Ответ 7

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");
}