Javascript代码在jsfiddle中工作，但不在浏览器中 [英] Javascript Code works in jsfiddle and but not in the Browser
问题描述
我尝试过搜索类似的问题，但一直无法找到我的代码在jfiddle中工作但不在浏览器中的原因。我也试着将我的代码从jfiddle复制到另一个小提琴项目，并且代码在新项目中不起作用。您可以在这里找到我的项目。我正在制作一款互动食品游戏，有人会挑选一个食品，例如橡子壁球，然后用户可以拖动图像。
I have tried searching similar problems but have not been able to find the reason why my code works in jfiddle but not in a browser. I have also tried making a copy of my code from jfiddle to another fiddle project and the code doesn't work in the new project. You can find my project here. I am making a interactive food game where someone picks a food item, example acorn squash and then the user can drag that image around.
我第一次尝试将代码粘贴到
My first attempt was pasting the code within the head.
<script language="JavaScript">
code
</script>
我是否需要onpage载入事件？是否需要将JavaScript放入函数中？我是否使用jfiddle框架中的某些东西，而这些东西不是我需要调用的本地主机上使用的？
Do I need an onpage load event? Does the javascript need to be put in a function? Am I using something from the jfiddle framework thats not being used on my local host that I need to call?
以下是我没有额外食物选项的代码
Below is the code I am using without the extra food options
var stage, layer;
var sources = {
plate: 'http://www.healncure.com/wp-content/uploads/2014/03/plate1.jpg',
acornsquash: 'http://www.healncure.com/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 处理程序中，该处理程序在页面加载过程中将其延迟至 。
The usual reason for this is that you're putting your code above the elements that it operates on, and not delaying the code using onload or "ready" events. jsFiddle's default is to put your JavaScript in an onload handler, which delays it until very late in the page load process.
基本上，在您的代码可以在页面上使用元素进行操作之前，元素必须存在。为了存在，浏览器必须为它处理HTML。所以这个失败：
Fundamentally, before your code can do something with an element on the page, the element has to exist. For it to exist, the browser must have processed the HTML for it. So this fails:
<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载入事件吗？
Do I need an onpage load event?
几乎肯定不是。
Almost certainly not.
JavaScript是否需要放置在一个函数中？
Does the javascript need to be put in a function?
不一定。你所做的是在HTML的最后部分< / body> 之前放置脚本标记>标记。
Not necessarily. What you do is put the script tag at the very end of the HTML, just before the closing </body> tag.
这篇关于Javascript代码在jsfiddle中工作，但不在浏览器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
