Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,105 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,289 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,289 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!