Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Sarah Rose
Sarah Rose
6,918 Points
Posted by Sarah Rose
Sarah Rose
6,918 Points

Coding Your First HTML5 Game... black rectangle doesn't want to appear

This is the javascript file, it was fine I would guess I've missed something here, it seems unhappy with the addEventListener when I inspect it in Chrome too, wondering if that's related.

It says reference error: load is not defined only when I inspect the file in browser, but otherwise the grey and white canvas appears when the page is loaded.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

imgFrog = new Image();
imgFrog.src = "images/mikethefrog.png";
imgFrog.addEventListener(load, init, false);    

var requestAnimFrame = 
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000/60);
        };

function init () {
    requestAnimFrame(update);
}

function update () {

    context.fillRect(10, 10, 40, 380, "#000000");

    requestAnimFrame(update);
}

Any ideas why this first black rectangle doesn't want to show?

Have I missed something obvious ;(

Thank you!

Jacob Mishkin
Jacob Mishkin
23,118 Points

I wish I could help, but I have no idea how to solve this, I'm sorry. My only advice is to work backwards and remove code until it starts working, then you will know your trouble spots. I know it's easier said than done, but that's what I would do.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

FYI I've modifed your question to include the syntax highlighting, to make the code easier to read.

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

In this case, the error message you included was helpful.

It's basically saying, 'we found a place in this code where you used the variable load, but you never told us what the value of that variable should be'.

According to the Mozilla Developer Network docs for addEventListener()'s syntax, its first parameter type should be a string:

target.addEventListener(type, listener[, useCapture]);

type A string representing the event type to listen for.

So you just need to put load in quotes and you should be good to go!