Undefined object inside object when accessing with Object function

Question

I am trying to change the value of "selectedArea" to the values I get from the mouse. Whenever I try to do so I get "Uncaught TypeError: Cannot read property 'start' of undefined". (mouseDown()) Probably an easy solution, just that I can not see it(quite new to javascript).

var areaSelection = {
mouseisDown: false,
selectedArea: {
    start: { x: 0, y: 0 },
    end: { x: 0, y: 0 }
},
initialize: function () {
    canvasSource.addEventListener("mousedown", this.mouseDown);
    canvasSource.addEventListener("mousemove", this.mouseMove);
    canvasSource.addEventListener("mouseup", this.mouseUp);
},
mouseDown: function (event) {
    if (!this.mouseisDown) {
        this.selectedArea.start.x = event.clientX;
        this.selectedArea.start.y = event.clientY;
    }
},
mouseMove: function (event) {
    if (this.mouseisDown) {
        var x = this.selectedArea.start.x;
        var y = this.selectedArea.start.y;
        var width = event.clientX - x;
        var height = event.clientY - y;
        drawOverlay(x, y, width, height);
    }
},
mouseUp: function (event) {
    if (this.mouseisDown) {
        this.selectedArea.end.x = event.clientX;
        this.selectedArea.end.y = event.clientY;
    }
}

};

We're missing a piece of the puzzle here...

Howard Renollet
– Howard Renollet

2015-07-08 19:05:03 +00:00
Commented Jul 8, 2015 at 19:05 — Howard Renollet
– Howard Renollet, Commented Jul 8, 2015 at 19:05

Sebastian Nette · Accepted Answer · 2015-07-08 19:06:24Z

1

You are missing the correct context in which the function is called:

canvasSource.addEventListener("mousedown", this.mouseDown.bind(this));

If you don't bind the context then the this inside the listener refers to the clicked element, which is the canvas.

answered Jul 8, 2015 at 19:06

Sebastian Nette

7,9022 gold badges20 silver badges18 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:51:14Z

0

Depending on how you call the function, this will not be the object you expected. The this keyword is different in Javascript from other languages (eg Java, C++).

https://stackoverflow.com/a/3127440/1172714

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 8, 2015 at 19:07

dsh

12.3k3 gold badges37 silver badges53 bronze badges

Collectives™ on Stack Overflow

Undefined object inside object when accessing with Object function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related