Undefined property from imported Class

Question

This is my first time with Webpack and ES6 modules. After bundling modules, at the beginning, it looks like the script loaded everything correctly, beacouse get methods return class property correctly, for example: Avaliable points: 5. But when I click "+" button init.getAvaliablePoints() and init.getHealthPoints() methods return NaN, when i click "-" return undefined. So, it seems that InitGame() propertys are undefined. Why?

Part of index.js:

//index.js
'use strict';
import InitGame from './InitGame.js';
import Game from './Game.js';

let init = new InitGame();

const creator = document.getElementById("creator");
const mainMenu = document.getElementById("main");

creator.innerHTML =
        `<h1>Create Character:</h1>
        <h3 id="points">Avaliable points: ${init.getAvaliablePoints()}</h3>
        <div class="stats">
            <div class="health">
                <button id="minusH" type="button">-</button>
                <span id="healthPoints">Health: ${init.getHealthPoints()}</span>
                <button id="plusH" type="button">+</button>
            </div>     
        </div>`;

document.querySelector("#minusH").addEventListener('click', init.removeHealthPoints);
document.querySelector("#plusH").addEventListener('click', init.addHealthPoints);

Part of InitGame.js:

//InitGame.js
export default class InitGame {
    constructor(){
        this.avaliablePoints = 5;
        this.healthPoints = 10;
        this.dmgPoints = 10;
        this.stats = undefined;
}

removeHealthPoints() {
        if (this.healthPoints >= 11) {
            this.avaliablePoints += 1;
            this.healthPoints -= 1;
        }
        else {
            console.log("10 health points is minimum");
        }
        document.getElementById("healthPoints").innerHTML = "Health: " + this.healthPoints;
        document.getElementById("points").innerHTML = "Avaliable points: " + this.avaliablePoints;
}

addHealthPoints() {
        if (this.avaliablePoints == 0) {
            console.log("0 avaliablePoints");
        }
        else {
            this.avaliablePoints -= 1;
            this.healthPoints += 1;
        }
        document.getElementById("healthPoints").innerHTML = "Health: " + this.healthPoints;
        document.getElementById("points").innerHTML = "Avaliable points: " + this.avaliablePoints;
}
getAvaliablePoints() {
        return this.avaliablePoints;
}
getHealthPoints() {
        return this.healthPoints;
}

score 0 · Accepted Answer · answered Sep 06 '19 at 14:29

The problem isn't that the properties are undefined, it's that this is not set properly when you click on the buttons. You're just passing the method function to addEventListener, but not binding it to the init object. As a result, within the functions this is set to the event target.

You can use the bind() method to bind it to the init object.

document.querySelector("#minusH").addEventListener('click', init.removeHealthPoints.bind(init));
document.querySelector("#plusH").addEventListener('click', init.addHealthPoints.bind(init));

Undefined property from imported Class

1 Answers1