Javascript - object field is undefined

Question

I will try to just post the important parts of my program. If more code is needed, let me know.

main.html

<html>
    <head>
        <title>Mathematician</title>
        <meta charset=UTF8 />
    </head>

    <body>
        <span id=player_information>
        </span>

        <hr />

        <span id=exercises>
        </span>
    </body>
    <script src="script.js"></script>
</html>

script.js (compressed version)

class Exercises
{
    constructor(player, number_of_exercises)
    {
        this.player = player;
        this.exercises = [];
        for (var i = 0; i < number_of_exercises; i++)
        {
            var exercise = new Exercise();
            var exercise_display = document.createTextNode(exercise);
            var input_field = document.createElement("input");
            var list_element = [exercise, exercise_display, input_field];
            this.exercises.push(list_element);
        }
    }

    display()
    {
        var exercises_area = document.getElementById("exercises");
        for (var i = 0; i < this.exercises.length; i++)
        {
            exercises_area.append(this.exercises[i][1]);
            exercises_area.append(this.exercises[i][2]);
            exercises_area.append(document.createElement("br"));
        }
        var check_button = document.createElement("button");
        check_button.innerHTML = "Check";
        check_button.onclick = this.check_exercises; 
        exercises_area.append(check_button);
    }

    check_exercises()
    {
        for (var i = 0; i < this.exercises.length; i++)
        {
            if (this.exercises[i][0].check_guess(this.exercises[i][2].value)) {
                alert("That was wright!");
            }
        }
    }
}

...

var player = new Player();
player.display();
var exercises = new Exercises(player, 10);
exercises.display();

This program generates exercises and displays them with a text and an input field where you can enter the solution. If I click on the check button, I get the following error message:

TypeError: this.exercises is undefined

What was my mystake? I tried to figure it out, but this error message doesnt makes sense to me.

either bind the `this` to your functions as `this.functionname = this.functionname.bind(this)` in the constructor or use arrow functions as `functionname=()=>{}`. — vikscool, Aug 03 '18 at 10:46

W.H.T · Accepted Answer · 2018-08-03T11:08:28.600

1

In your constructor you want to bind this to your display and check_exercises functions.

Try:

constructor(player, number_of_exercises)
{
    ...code...

    this.check_exercises = this.check_exercises.bind(this)
    this.display = this.display.bind(this)
}

Also 'right' is spelled without a 'w' ;)

edited Aug 03 '18 at 11:08

answered Aug 03 '18 at 10:58

W.H.T

125
1
8

score 0 · Answer 2 · answered Aug 03 '18 at 10:56

You have to bind the this object to your functions in order to use the this as your class object.

Because the this object in your function is basically referring to the this object of whoever is calling it.

Let,s say if you have an HTML code as:

<button onclick=Display()>Display</button>

the this object, in this case, will refer to the button and as the button object do not have any property called as exercise it is throwing an error as undefined.

So, what you can do is either bind the this object at the constructor as :

constructor()
{
  this.display = this.display.bind(this);
}

or you can declare your function as arrow function:

display=()=>{
 //my function code goes here.
 }

Unfortunately, both methods dont work. If I add "this.display = this.display.bind(this);" in the constructor, I get the same error message. If I try the second variant, the browser says "bad method definition". — Henry Weinert, Aug 03 '18 at 11:25

Javascript - object field is undefined

2 Answers2