1

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);
}
AndrewH
  • 370
  • 8
  • 25
  • 5
    Strange, considering that jsfiddle runs in a browser. – KooiInc Apr 16 '14 at 17:42
  • 1
    Either you put it on the window.onload event or place it at the end of the body tag. The elements have to be loaded before the JS can "see" them. –  Apr 16 '14 at 17:42
  • Your fiddle is set to use jQuery. I dare say your "real page" is not. – Lee Taylor Apr 16 '14 at 17:44
  • jsfiddle adds a Window Onload for your javascript section for you, you can see it when you inspect the iframe it generates. – RenegadeMatrix Apr 16 '14 at 17:48
  • Did you include jQuery library? – Milan and Friends Apr 16 '14 at 18:06
  • I have added jquery library in the head section. I have also tried placing the javascript below the html as described in @T.J. Crowder comment. I am still not seeing the plate load. – AndrewH Apr 16 '14 at 19:05
  • Don't understand why this was closed. The issue is easily reproduced, and answers below give solutions. This topic certainly helped me (another jsfiddle beginer). – SMBiggs Mar 30 '15 at 14:24

2 Answers2

6

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks for the example. I understand why it seems to not be working. I have tried placing my code below the html, that did not fix the problem. I have also included jquery library in the head. still nothing (mention from a comment). I was inspecting my page and I get this, "Uncaught ReferenceError: Kinetic is not defined". How do I define that? – AndrewH Apr 16 '14 at 19:18
  • @user3251146: It sounds like you're using [KineticJS](http://kineticjs.com/), but not including the KineticJS script, which would need to be included prior to your code using it. – T.J. Crowder Apr 16 '14 at 21:01
  • @T.J.Crowder, I seem to have run into a similar problem, although in my case, running the code generated by the JSFiddle iframe exactly as is on my browser still doesn't work. Would it please be possible to take a look at my question [here](https://stackoverflow.com/q/62945761/10841085) at your convenience? I'm new to web development so I'm having a hard time isolating the issue. – user51462 Jul 17 '20 at 03:53
2

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.

Milan and Friends
  • 5,560
  • 1
  • 20
  • 28
  • I was missing this, for some reason when I included that in the head it didn't work. When I included Microsoft CDN: version then my code decided to work. – AndrewH Apr 28 '14 at 19:55