Javascript代码工作在jsfiddle而不是在浏览器

我试图寻找类似的问题,但一直没能find我的代码工作在jfiddle而不是在浏览器中的原因。 我也尝试了从jfiddle到另一个小提琴项目的代码副本,并在新项目中的代码不起作用。 你可以在这里find我的项目 。 我正在做一个互动的食品游戏,有人挑选一个食品,例如橡子壁球,然后用户可以拖动图像。

我的第一个尝试是在代码中粘贴代码。

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

我是否需要onpage载入事件? JavaScript是否需要放在一个函数? 我是否使用jfiddle框架中没有在我需要调用的本地主机上使用的东西?

下面是我没有额外的食物选项使用的代码

 var stage, layer; var sources = { plate: 'wp-content/uploads/2014/03/plate1.jpg', acornsquash: 'wp-content/uploads/2014/03/acorn-squash.png', }; loadImages(sources, initStage); function loadImages(sources, callback) { var images = {}; var loadedImages = 0; var numImages = 0; // get num of sources for (var src in sources) { numImages++; } for (var src in sources) { images[src] = new Image(); images[src].onload = function () { if (++loadedImages >= numImages) { callback(images); } }; images[src].src = sources[src]; } } function initStage(images) { stage = new Kinetic.Stage({ container: 'container', width: 936, height: 550 }); layer = new Kinetic.Layer(); stage.add(layer); // plate var plateImg = new Kinetic.Image({ image: images.plate, x: 218, y: 20, width: 503, hei4ht: 502, draggable: false, visible: true }); layer.add(plateImg); // acornsquash var acornsquashImg = new Kinetic.Image({ id: "acornsquash", image: images.acornsquash, x: 50, y: 20, width: 134, height: 114, draggable: true, stroke: 'orange', strokeWidth: 5, strokeEnabled: false, visible: false }); layer.add(acornsquashImg); layer.draw(); $(".food").click(function () { var node = stage.find("#" + $(this).attr("id")); node.show(); layer.draw(); console.log($(this).attr("id")); }); document.getElementById('hide').addEventListener('click', function () { acornsquashImg.hide(); layer.draw(); }, false); } 

通常的原因是你把你的代码放在它所操作的元素的上面 ,而不是使用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> 

但是这个工作:

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

我是否需要onpage载入事件?

几乎肯定不是。

JavaScript是否需要放在一个函数?

不必要。 你所做的就是把script标签放在HTML的最后面,就在closures</body>标签之前。

将jQuery库包含在文档头部分

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

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

 <script> $(function() { ...your custom scripts... }); </script> 

就在</body>标签之前。