Javascript代码可以在JSFIDLE中工作，但不能在浏览器中工作_Javascript_Jquery_Html_Loading

Javascript代码可以在JSFIDLE中工作，但不能在浏览器中工作

javascript jquery html

Javascript代码可以在JSFIDLE中工作，但不能在浏览器中工作,javascript,jquery,html,loading,Javascript,Jquery,Html,Loading,我曾尝试搜索类似的问题，但未能找到代码在JFIDLE中工作而在浏览器中无法工作的原因。我还尝试将我的代码从jfiddle复制到另一个fiddle项目中，但代码在新项目中不起作用。你可以找到。我正在制作一个交互式食物游戏，其中有人挑选食物，例如橡子南瓜，然后用户可以拖动该图像我的第一次尝试是在头部粘贴代码 <script language="JavaScript"> code </script> 这通常是因为您将代码放在其操作的元素之上，而不是使用onload或“rea

我曾尝试搜索类似的问题，但未能找到代码在JFIDLE中工作而在浏览器中无法工作的原因。我还尝试将我的代码从jfiddle复制到另一个fiddle项目中，但代码在新项目中不起作用。你可以找到。我正在制作一个交互式食物游戏，其中有人挑选食物，例如橡子南瓜，然后用户可以拖动该图像

我的第一次尝试是在头部粘贴代码

<script language="JavaScript">
code
</script>

这通常是因为您将代码放在其操作的元素之上，而不是使用

onload

或“ready”事件延迟代码。jsFiddle的默认设置是将JavaScript放在

onload

处理程序中，这会将其延迟到页面加载过程的很晚

基本上，在代码可以对页面上的元素执行操作之前，元素必须存在。要使其存在，浏览器必须已处理其HTML。所以这是失败的：

<html>
<head>
<script>
// FAILS
document.getElementById("foo").style.color = "green";
</script>
</head>
<body>
<div id="foo">This is foo</div>
</body>
</html>


//失败
document.getElementById（“foo”）.style.color=“绿色”；
我是福

但这是可行的：

<html>
<head>
</head>
<body>
<div id="foo">This is foo</div>
<script>
// Works
document.getElementById("foo").style.color = "green";
</script>
</body>
</html>


我是福
//工作
document.getElementById（“foo”）.style.color=“绿色”；

我需要打开页面加载事件吗

几乎可以肯定不是

javascript是否需要放在函数中

不一定。您要做的是将

脚本

标记放在HTML的最末尾，就在关闭

标记之前。

将jQuery库包含在文档的标题部分

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

然后在脚本标记和文档准备功能之间包装自定义脚本

<script>
  $(function() {

    ...your custom scripts...

  });
</script>


$（函数（）{
…您的自定义脚本。。。
});

就在

标记之前。

奇怪，考虑到jsiddle在浏览器中运行。您可以将其放在window.onload事件中，或者将其放在body标记的末尾。必须先加载元素，JS才能“看到”它们。我敢说你的“真实页面”不是。jsfiddle为你的javascript部分添加了一个窗口Onload，你可以在检查它生成的iframe时看到它。你包括jQuery库了吗？谢谢你的例子。我理解为什么它似乎不起作用。我尝试将代码放在html下面，但没有解决问题。我还将jquery库包含在head中。仍然没有（从评论中提及）。我检查了我的页面，我得到了这个，“未捕获的引用错误：动力学未定义”。我如何定义它？@user3251146：听起来你在使用，但不包括KineticJS脚本，这需要在你的代码使用它之前包含。@T.J.Crowder，我似乎遇到了类似的问题，尽管在我的情况下，完全按照我的浏览器运行JSFIDLE iframe生成的代码仍然不起作用。您方便的时候可以看一下我的问题吗？我是网络开发新手，所以我很难孤立这个问题。我错过了这一点，因为某种原因，当我将它包含在头部时，它不起作用。当我加入MicrosoftCDN:version时，我的代码决定工作。

<script>
  $(function() {

    ...your custom scripts...

  });
</script>