logo标签列表

如何在jsfiddle中使用函数声明

javascriptjsfiddle
5
我有一些在我的.cshtml文件中运作的HTML/JavaScript代码。
当我尝试将它移植到jsfiddle中进行测试时，它无法正常工作。
不确定是因为我缺乏JavaScript经验，还是Jsfiddle经验，也可能是两者都有....

HTML:

<div>
<button name="startBtn" id="startBtn" onclick="startTimer">Start</button>
</div>

我也尝试过在"onclick"属性中使用"startTimer()"，结果相同。 javascript:
function startTimer() { alert("startTimer"); }

当我点击按钮时，在控制台中看到以下内容：

未捕获的引用错误：startTimer未定义

我忽略了什么？
(jsfiddle链接: http://bit.ly/1buQx9t)
除了您忘记调用“startTimer”的括号之外，Simple example doesn't work on JSFiddle与完全重复。 - Bergi
6个回答
11

jsFiddle演示

首先，您需要将框架设置为No wrap - in <head>，而不是onLoad。

JSFiddle选项

说明

onLoad 在JavaScript中相当于 window.onload=function(){[在此输入代码]}，在jQuery中相当于 $(function(){[在此输入代码]});。

No wrap - in <head> 相当于 <head><script type="text/javascript">[在此输入代码]</script</head>

No wrap - in <body> 相当于 <body>[HTML代码]<script type="text/javascript">[在此输入代码]</script></head>

我希望这能帮助您理解在jsFiddle中的这些设置，它们可能有点令人困惑。

其次，您的HTML稍微有些错误：

HTML

<div>
    <input type="button' value='"Start" onclick="startTimer()"/>
</div>

描述

onclick="startTimer"已更改为onclick="startTimer()"，这将执行该函数。

3
首要问题：你必须在onload中设定jsfiddle，这样函数才不会在全局范围内。 enter image description here
其次，你没有调用函数。你漏了()。
 onclick="startTimer()"
0
你有一些额外的引号错位，并没有调用函数。需要添加()来调用它。最后需要将"onload"更改为"no wrap - in"。
<div>
     <input type="button" value="Start" onclick="startTimer()"/>
 </div>
0

你的代码里有一些奇怪的引号（在你的fiddle中），而且你忘记在函数名后面加上()了。使用以下代码：

<input type="button" value=" Start " onclick="startTimer()" />

jsFiddle 示例

感谢回复。你的fiddle和我的一个区别——即使我解决了引号问题——在“框架和扩展”下面。我将第二个选项设置为“onLoad”，当我将其更改为其中一个“no wrap…”选项时，它就可以工作了。我需要调查这些选项... - Number8
你不需要在代码中使用onLoad选项，只需将其放置在文档的头部即可。jsFiddle中的onLoad选项会像这样包装你的JavaScript代码：//<![CDATA[ window.onload=function(){ function startTimer() { alert("startTimer"); } }//]]> - j08691
0
如果你在jsfiddle中使用纯JavaScript（即没有jquery等），那么将第二个下拉菜单改为“不包裹 - 在标签内”。
0
以上的答案都是正确的；我只是想澄清一下，要在哪里更改这张图片才能解决问题：
这里是 jsfiddle演示。
<button onclick="doThat()">
Click
</button>

function doThat() {
    console.log("click happened");
}

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接