为什么不是'；我的JavaScript不能在JSFIDLE中工作吗？

我不知道这有什么问题

HTML:

当我点击按钮时，什么也没发生。控制台显示“未定义测试”

---

我已经阅读了JSFIDLE文档-其中说JS代码被添加到

，HTML代码被添加到

（因此此JS代码早于HTML，应该可以工作）。

函数是在加载处理程序中定义的，因此在不同的范围内。正如@ellisbben在注释中所指出的，您可以通过在

窗口

对象上显式定义它来解决这个问题。更好的是，将其更改为以不引人注目的方式将处理程序应用于对象：

---

注意以这种方式应用处理程序，而不是内联，可以保持HTML的整洁。我使用的是jQuery，但是如果您愿意，您可以使用框架，也可以不使用框架，或者使用不同的框架。

如果您不指定wrap设置，则默认为“onLoad”。这将导致在加载结果后将所有JavaScript包装在函数中运行。所有变量都是此函数的局部变量，因此在全局范围内不可用

将换行设置更改为“无换行”，它将起作用：

---

我将框架切换为“无库”，因为您不使用任何库。

还有另一种方法，将函数声明为如下所示的变量：

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

var test = function(){};

---

细节 编辑（基于@nnnnnn的评论）

@nnnnnn：

为什么说

test=

（没有

var

）可以解决这个问题

定义这样的函数时：

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

var test = function(){};

函数是在本地定义的，但是当您在没有

var

的情况下定义函数时：

test = function(){};

test

在顶级范围的

窗口

对象上定义

为什么这样做有效

比如@zalun说：

---

如果未指定换行设置，则默认为“onLoad”。这将导致在加载结果后将所有JavaScript包装在函数中运行。所有变量都是此函数的局部变量，因此在全局范围内不可用

但如果使用这种语法：

test = function(){};

您可以访问函数

test

，因为它是全局定义的

---

参考资料：

---

将框架和扩展面板中的wrap设置更改为“无wrap in

”

您的代码没有问题。只需从右侧选择扩展onLoad（）

Select OnDomready

HTML:

功能测试（）{
警报（“测试”）；
}

@innuedo-jsFiddle对代码/html/样式表使用单独的框架。您需要在函数调用中引用框架，但由于框架没有名称，因此没有一种简单的方法来实现这一点。由于JSFIDLE的工作方式，这确实是一个问题，但保持javascript完全独立仍然是一个好主意。@tvanfosson-您的解决方案可以工作，但JSFIDLE不使用单独的框架来显示结果；看见它最初不起作用的原因是

test

是在

onLoad

函数中定义的；使用

window.test=function（）{/*…*/}

使它工作得非常好。@ellisbben-如果我使用Firebug检查DOM，4个单独的窗格中的每一个都存在于一个单独的iframe中。是的，但是如果你检查用于显示示例的单个iframe，你会看到它将所有代码放在一个不使用框架的页面中，因此，这些框架不能破坏您的示例。将

show

附加到任何jsfiddle URL以查看我所说的内容：jsfiddle.net/Yazpj/show删除括号也可以在正常的非小提琴环境下工作，尽管尽可能将js与HTML分开绝对是一个好建议。我只允许自己使用style=“display:none”CSS内联no-no.related：这确实是最简单的方法，您只需要在JSFiddle中测试一点点代码。但是为什么这样做呢？您提供的“更多信息”链接没有解释问题与范围有关，也没有解释为什么说

test=

（没有

var

）可以解决问题。@R3tep好的，您的第一个链接是：alert对我没有任何帮助。我在chrome上。@R3tep是的，它与console.log一起工作。我将在上面发布一个问题，因为我认为我没有警报框这一事实与我在iframes上遇到的另一个问题有关。@R3tep我想你误解了我，但我不确定。你的代码很好。JSFIDLE的编码方式存在问题（用于显示结果的iframe的sandbox属性中缺少值）。这使得它无法在某些版本的chrome上运行。我在他们的github上发送了一份问题报告。我对它非常感兴趣，因为我认为我在我的网站上遇到的问题是相同的，但不是。干杯。

Select OnDomready

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

addEventListener('load', init, false);

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

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

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

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