Reference error "object property is not defined"

Question

I have the following structure:

appInterface = { 
  mainWinCanvas: document.getElementById("mainwindow"),
  mainWinContext: mainWinCanvas.getContext("2d"),
  mainWinCanvasWidth: mainWinCanvas.width,
  mainWinCanvasHeight: mainWinCanvas.height, 
  mainWinCanvasData: mainWinContext.getImageData(0, 0, mainWinCanvasWidth, mainWinCanvasHeight)
}

and get this error in Firebug: mainWinCanvas is not defined

What's causing it? I'm sure the script is called AFTER body element previous children are fully loaded. My goal is to make the code more readable, it's no-object version is working :(

So, what to do? Seems first commenter wiped the suggestion ... — 1000Gbps
– 1000Gbps, Commented Feb 16, 2014 at 14:13
Just replace the property name with document.getElementById("mainwindow")(can be also cached outside of object literal), or use a getter, or create the object using constructor function. — Teemu
– Teemu, Commented Feb 16, 2014 at 14:18
Yeah, but this adds too much letters to the code. The second idea is cool, but this means no well structured objects. The third seems will add more code. — 1000Gbps
– 1000Gbps, Commented Feb 16, 2014 at 14:24
Yes, it's allowed, though only one argument can be passed to setter. You can pass multiple values within an array or object ofcourse. — Teemu
– Teemu, Commented Feb 16, 2014 at 15:16

Rahil Wazir · Accepted Answer · 2014-02-16 16:37:14Z

2

All you have to do is wrap this in a function and return it as object so the this context should be available to your current appInterface Object. Also convert your properties to methods, so you can able to do method chaining.

var appInterface = function () {
    return {
        canvas: null,
        ctx: null,
        mainWinCanvas: function (elem) {
            if (this.canvas === null) {
                this.canvas = document.getElementById(elem);
            }
            return this;
        },
        mainWinContext: function () {
            this.ctx = this.canvas.getContext("2d");
            return this;
        },
        mainWinCanvasWidth: function () {
            return this.canvas.width;
        },
        mainWinCanvasHeight: function () {
            return this.canvas.height;
        },
        mainWinCanvasData: function () {
            this.ctx.getImageData(0, 0, this.mainWinCanvasWidth(), this.mainWinCanvasHeight());
            return this;
        }
    };
};

Usage:

appInterface().mainWinCanvas('mainWindow').mainWinContext().mainWinCanvasWidth();

edited Feb 16, 2014 at 16:37

answered Feb 16, 2014 at 14:22

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

1000Gbps Over a year ago

This drops another TypeError: appInterface.CPanel is undefined while trying to add at document.body.onload appInterface.CPanel.addEventListener('click', function(){});

Rahil Wazir Over a year ago

@Teemu This was not i was trying to post it was posted too earlier. By the way i forgot to convert properties into methods. Now it should work.

Teemu Over a year ago

@RahilWazir Now your code is supposed to work. I didn't downvote, so I can't remove it either...

Teemu · Accepted Answer · 2014-02-16 15:56:07Z

1

There's not much more coding, when creating an object with a constructor function:

function AppInterface (cnvid) { 
    this.mainWinCanvas = document.getElementById(cnvid);
    this.mainWinContext = this.mainWinCanvas.getContext("2d");
    this.mainWinCanvasWidth = this.mainWinCanvas.width;
    this.mainWinCanvasHeight = this.mainWinCanvas.height;
    this.mainWinCanvasData = this.mainWinContext.getImageData(0, 0, this.mainWinCanvasWidth, this.mainWinCanvasHeight);
}
var appInterface = new AppInterface("mainwindow");

You can even reuse the constructor, if you'd need more than one "appInterFace" in your app.

answered Feb 16, 2014 at 15:56

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

1 Comment

1000Gbps Over a year ago

For the moment your answer is the clearest solution.

markcial · Accepted Answer · 2014-02-16 14:22:37Z

0

The object has no local context, you need to acces by its main reference appInterface

appInterface = { 
  mainWinCanvas: document.getElementById("mainwindow"),
  mainWinContext: appInterface.mainWinCanvas.getContext("2d"),
  mainWinCanvasWidth: appInterface.mainWinCanvas.width,
  mainWinCanvasHeight: appInterface.mainWinCanvas.height, 
  mainWinCanvasData: appInterface.mainWinContext.getImageData(0, 0, appInterface.mainWinCanvasWidth, appInterface.mainWinCanvasHeight)
}

If you want to have local context use functions instead

EDIT

use function constructor instead, you need a live instance for self referencing

var appInterface = new function(){
    this.test = 4;
};
appInterface = {
    anotherTest:appInterface.test
}

console.log(appInterface.test)

edited Feb 16, 2014 at 14:22

answered Feb 16, 2014 at 14:14

markcial

9,3634 gold badges33 silver badges41 bronze badges

3 Comments

Rahil Wazir Over a year ago

Have you tested this? Got appInterface is undefined

markcial Over a year ago

True, then with object is a no go, should be a function

1000Gbps Over a year ago

For the mainWinContext I get TypeError: appInterface is undefined

1000Gbps · Accepted Answer · 2014-02-16 15:08:11Z

0

One lame workaround to escape writting functions and getters/setters is to do the following:

appInterface = new Object();
appInerface.mainWinCanvas = document.getElementById("mainwindow");
appInerface.mainWinContext = appInerface.mainWinCanvas.getContext("2d");
...

This is stupid, i'm not deeply in JS but don't see the difference between new Object() and corresponging defining of its properties, or structure in the question ...

answered Feb 16, 2014 at 15:08

1000Gbps

1,5272 gold badges30 silver badges36 bronze badges

Collectives™ on Stack Overflow

Reference error "object property is not defined"

4 Answers 4

3 Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related