Javascript Code работает в jsfiddle, но не в браузере

Я пытался найти похожие проблемы, но не смог найти причину, по которой мой код работает в jfiddle, а не в браузере. Я также попытался сделать копию своего кода из jfiddle в другой проект скрипта, и код не работает в новом проекте. Вы можете найти мой проект здесь. Я делаю интерактивную игру о еде, в которой кто-то выбирает продукт, например, желудевую тыкву, а затем пользователь может перетаскивать это изображение.

Моя первая попытка была вставить код в голову.

<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);
}
Источник

2 ответа

Решение

Обычная причина этого заключается в том, что вы размещаете свой код над элементами, над которыми он работает, а не задерживаете код, используя 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>

Нужно ли мне событие загрузки страницы?

Почти наверняка нет.

Должен ли JavaScript быть включен в функцию?

Не обязательно. Что вы делаете, это положить script тег в самом конце HTML, перед закрытием </body> тег.

Источник

Включите библиотеку jQuery в заголовочный раздел вашего документа

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

затем оберните ваши собственные сценарии между тегами сценария и функцией готовности документа

<script>
  $(function() {

    ...your custom scripts...

  });
</script>

как раз перед </body> тег.

Источник
Другие вопросы по тегам