Javascript Code works in jsfiddle and but not in the Browser [closed]

StackOverflow https://stackoverflow.com/questions/23116431

Question

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>

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);
}
Was it helpful?

Solution

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.

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>

but this works:

<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?

Almost certainly not.

Does the javascript need to be put in a function?

Not necessarily. What you do is put the script tag at the very end of the HTML, just before the closing </body> tag.

OTHER TIPS

Include jQuery library in the head section of your document

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

then wrap your custom scripts between script tags and document ready function

<script>
  $(function() {

    ...your custom scripts...

  });
</script>

just before the </body> tag.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top