Cannot read property 'set' of undefined of a defined Map

Question

I'm working with ES6 for the first time, and I read some stuff about maps. From what I understand, this should be well within the possibility of ES6:

export class Elements {

    constructor() {
        this.elements = new Map();
        this.attachListeners();
    }

    textElement () {
        this.elements.set((elements.length + 1), new TextElement());
    }

    attachListeners () {
        document.getElementById('addText').addEventListener('click', this.textElement);
    }
}

However, when I click the addText element, I get the following in my console

Uncaught TypeError: Cannot read property 'set' of undefined at HTMLDivElement.textElement

I tried swapping the Map with a Set, an Array and an Object, however, that same error kept coming into my console.

How can it be that a simple operation like this isn't working?

See *Common problem: Using object methods as callbacks / event handlers* in the duplicate. — Felix Kling, Mar 31 '17 at 16:43

score 1 · Accepted Answer · answered Mar 31 '17 at 16:27

You need to bind your listener, like this:

document.getElementById('addText').addEventListener('click', this.textElement.bind(this));

Otherwise, this refers to your 'addText' element in your textElement function.

Try console.log(this) in textElement with and without the .bind(this) and you'll understand what's happening.

Cannot read property 'set' of undefined of a defined Map

1 Answers1