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

Question

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

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

HTML:

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

JavaScript:

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

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

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

618 7

javascript html jsfiddle

7 ответов:

Comments

Ничего не найдено.

tvanfosson · Accepted Answer · 2014-10-14 15:58:40

Функция определяется внутри обработчика нагрузки и, таким образом, находится в другой области видимости. Как отмечает @ellisbben в комментариях, Это можно исправить, явно определив его в объекте window. Еще лучше изменить его, чтобы незаметно применить обработчик к объекту: http://jsfiddle.net/pUeue/
$('input[type=button]').click( function() {
   alert("test");   
});
Примечание применение обработчика таким образом, вместо встроенного, сохраняет ваш HTML чистым. Я использую jQuery, но вы можете сделать это с или без фреймворка или с помощью другого рамки, если хотите.

zalun · Accepted Answer · 2011-04-29 12:36:44

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

Измените настройку обертывания на "no wrap", и она будет работать:

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

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

R3tep · Accepted Answer · 2017-05-23 15:09:48

Есть другой способ, объявить вашу функцию в переменную следующим образом:
test = function() {
  alert("test");
}
JsFiddle

Подробности

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

@нннннн:

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

Когда вы определяете функцию следующим образом:
var test = function(){};
Функция определяется локально, но когда вы определяете свою функцию без var :
test = function(){};
test определяется на объекте window, который находится на верхнем уровне области видимости.

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

Как @zalun говорят:

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

Но если вы используете этот синтаксис :
test = function(){};
У вас есть доступ к функции test, потому что она определена глобально

Список литературы:

https://stackoverflow.com/a/338053/3083093

https://stackoverflow.com/a/5830423/3083093

Academia · Accepted Answer · 2015-10-08 13:06:39

Измените настройку wrap на панели Frameworks & Extensions на "No wrap-in <body>"

Omjjh · Accepted Answer · 2014-09-12 12:32:38

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

Muslim Munir · Accepted Answer · 2016-01-21 10:37:55

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

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

Ivan · Accepted Answer · 2015-10-27 10:41:12

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