CODEWITHSUNDEEP
javascriptraphael
Prakash Kuma
Prakash Kuma

Reputation: 782

working with Javascript object model

What i am trying to achieve is creating some objects by following a better pattern. I am using Raphael.js library for creation of graphical shapes.

Problem is at the line:

X: "" + this.canvas_X + this.paper["width"]/2 - self.width/4,

The error i am getting is :

Uncaught TypeError: Cannot read property 'width' of undefined

I figured out that error is at this.paper["width"]/2. I am new to using javascript and not able to understand what error i am doing

var Graphics={
        create_canvas: function(){
                $("#canvasdiv").append("<div id='id1' width='80px' height='50px'></div>");
        },
        canvas_X:get_LEFT_TOP("canvasdiv")[0],
        canvas_Y:get_LEFT_TOP("canvasdiv")[1],
        canvas_width:function(){return $("#canvasdiv").width()},
        canvas_height:function(){return $("#canvasdiv").height()},
        paper:{
            width:900,
            height:700,
            create: function(){
                return new Raphael(document.getElementById('canvasdiv'),this.width,this.height);
            }
        },
        vswitch:{
            color:"Black",
            text:"vSwitch",
            width:"150",
            height:"150",
            X: "" + this.canvas_X + this.paper["width"]/2 - self.width/4,
            Y: Graphics.canvas_Y,
            delay:"2000",
            create: function(paper){
                setTimeout(function(){
                        paper.rect(X,Y,width,height).attr({fill : "black"})
                        },delay);
            }
        },
}

This is the way the call is being made:

 Graphics.create_canvas();
    p=Graphics.paper.create();
    Graphics.vswitch.create(p);

Upvotes: 0

Views: 39

Answers (1)

cdosborn
cdosborn

Reputation: 3469

After you enter your code, try: Graphics.paper it shouldn't throw any errors. However this.paper["width"] doesn't have paper as a property. In that case this refers to the object being created which will be known as vswitch.

Check out this code:

var obj = { x: 0, y: this.x }

The browser doesn't complain, however y is undefined. Based on the rules of creating objects, when it goes to create y, it doesn't know x exists on this or obj.

The following works:

var obj = { x: 0 }
obj.y = obj.x

Tips: You're using this at the wrong time, i'd suggest exploring what this means. Ill give you the rundown.

Open your console and enter:

this
// Window -> blah blah

var f = function() {
    console.log(this);
}
f()
// Window -> blah blah

var me = {}
me.f = f
me.f()
// Object { f: f() }

In short, this refers to the owner of a function. Otherwise it refers to the Window, and if you're creating an object this isn't bound until the object is finished (i.e. at the end of the brackets).

Upvotes: 1

Related Questions