我尝试搜索类似的问题，但无法找到我的代码在 jfiddle 中工作但在浏览器中不起作用的原因。我还尝试将我的代码从 jfiddle 复制到另一个 fiddle 项目，但该代码在新项目中不起作用。您可以找到my project here 。我正在制作一个交互式食物游戏，有人选择一种食物，例如橡子南瓜，然后用户可以拖动该图像。
我的第一次尝试是将代码粘贴到头部。
<script language="JavaScript">
code
</script>
我需要页面加载事件吗？ javascript需要放在函数中吗？我是否使用了 jfiddle 框架中未在我需要调用的本地主机上使用的内容？
下面是我使用的代码，没有额外的食物选项
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 来延迟代码。或“就绪”事件。 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>
Do I need an onpage load event?
几乎肯定不会。
Does the javascript need to be put in a function?
不一定。你所做的就是输入 script标签位于 HTML 的最末尾，就在结束符 </body> 之前标签。
关于Javascript 代码可以在 jsfiddle 中运行，但不能在浏览器中运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23116431/