Javascript undefined error: `this` is null

Question

Somehow when executing this code, I get the alert from line 29 .mouseOnSeat. But I don't know why this.seats is null, while in the draw function it is not. I call the init function from html5.

//init called by html5
function init() {
  var cinema = new Cinema(8, 10);
  cinema.draw("simpleCanvas");

  var canvas = document.getElementById("simpleCanvas");
  //add event listener and call mouseOnSeat
  canvas.addEventListener('mousedown', cinema.mouseOnSeat, false);
}

var Cinema = (function () {
  function Cinema(rows, seatsPerRow) {
    this.seats = [];
    this.rows = rows;
    this.seatsPerRow = seatsPerRow;

    var seatSize = 20;
    var seatSpacing = 3;
    var rowSpacing = 5;

    var i;
    var j;
    for (i = 0; i < rows; i++) {
        for (j = 0; j < seatsPerRow; j++) {
            this.seats[(i * seatsPerRow) + j] = new Seat(i, j, new Rect(j * (seatSize +   seatSpacing), i * (seatSize + rowSpacing), seatSize, seatSize));
        }
    }
  }

  Cinema.prototype.mouseOnSeat = function (event) {
    //somehow this is null
    if (this.seats == null) {
        alert("seats was null");
        return;
    }
    for (var i = 0; i < this.seats.length; i++) {
        var s = this.seats[i];
        if (s.mouseOnSeat(event)) {
            alert("Mouse on a seat");
        }
    }
    alert("Mouse not on any seat");
  };

  Cinema.prototype.draw = function (canvasId) {
    var canvas = document.getElementById(canvasId);
    var context = canvas.getContext('2d');
    var i;
    //somehow this isn't
    for (i = 0; i < this.seats.length; i++) {
        var s = this.seats[i];
        context.beginPath();
        var rect = context.rect(s.rect.x, s.rect.y, s.rect.width, s.rect.height);
        context.fillStyle = 'green';
        context.fill();
    }
  };
  return Cinema;
})();

I tried a lot, like creating a self variable (var self = this ) and then calling from self.mouseOnSeat, it was suggested on another post, but I didn't figure it out.

Are you sure that the two definitions of Cinema are not conflicting? — fejese
– fejese, Commented Nov 2, 2014 at 21:10
Creating the self variable only works if your function definition is inside the function that has the correct this. For example if you did not have a separate mouseOnSeat function but defined that function inline inside the addEventListener call, you could use that trick to replace this with self and there would be no problems. — Nakedible
– Nakedible, Commented Nov 2, 2014 at 21:28

Nakedible · Accepted Answer · 2014-11-02 21:32:00Z

1

The problem is that when you call addEventListener, the variable this does not carry along to the function call. This means that this is not your object.

You workaround is sound, you can use it. Or alteratively change your addEventListener call to:

canvas.addEventListener('mousedown', cinema.mouseOnSeat.bind(this), false);

Do note that you might need to use a polyfill to get Function.prototype.bind for older browsers, although it is very well supported currently. See caniuse.

edited Nov 2, 2014 at 21:32

answered Nov 2, 2014 at 21:24

Nakedible

4,1987 gold badges37 silver badges42 bronze badges

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

Comments

1elf · Accepted Answer · 2014-11-02 21:22:35Z

0

I found a workaround : canvas.addEventListener('mousedown', function (event) { cinema.mouseOnSeat(event); }, false);

But I have no clue why

answered Nov 2, 2014 at 21:22

1elf

234 bronze badges

Collectives™ on Stack Overflow

Javascript undefined error: `this` is null

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related