Why is this property undefined?

Question

I have the following code:

class userData {

    catchDropDownSelection(){
        this.dropDownSelection = $('#xDropDown').prop('selectedIndex');
        console.log("dropDownSelection is ", this.dropDownSelection)
    }
}

class sendData{
    constructor(userData){
        this.userDataClone = userData;

    }

    sendDropDownSelection(){
        //this.userDataClone.catchDropDownSelection();
        console.log("this.userDataClone.dropDownSelection inside sendDropDownSelection is ", this.userDataClone.dropDownSelection)
        $.post("MyFirstPhP.php", {
            userSelection : this.userDataClone.dropDownSelection
        }, function (data){
            //this.testFunction()
            $('#testOutput').html(data);
            //document.getElementById("testOutput").innerHTML = "data"
        }).fail(function(){
            console.log("$.post failed!");
        })
    }

    testFunction(){
        //document.getElementById("testOutput").innerHTML = "data"
        $('#testOutput').html("data");
    }
}


class setEvents {

  constructor(sendData, userData){
    this.sendDataClone = sendData;
    this.userDataClone = userData;
  }

  onClickEvents(){
    $('#sendDataButton').click(function(){
      this.userDataClone.catchDropDownSelection()
      //console.log("index catched is ", this.sendDataClone.userDataClone.dropDownSelection)
    })
    $('#sendDataButton').click(function(){
      this.sendDataClone.sendDropDownSelection()
    })
  }

  addAllEvents(){
    this.onClickEvents()
  }
}

var userDataInstance = new userData;
var sendDataInstance = new sendData(userDataInstance);
var setEventsInstance = new setEvents(sendDataInstance, userDataInstance);

<!DOCTYPE html>
<html>
    <head>
        <title>PHP is Awesome!</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <link rel = "stylesheet" type = "text/css" href = "MyFirstPhP.css">
    </head>
        <body onload="setEventsInstance.addAllEvents()">
          <div id = "fancyBackGround">
            <form>
              <select id = "xDropDown">
                  <option value = "test1">test1</option>
                  <option value = "test2">test2</option>
              </select>
            </form>


            <button id="sendDataButton">ClickMe!</button>

            <p id = "testOutput">not yet</p>
          </div>





            <script src="MyFirstPhP.js"></script>
        </body>
</html>

Here is the php which is called by AJAX:

<?php
session_start();
$dropDownSelection = $_POST['userSelection'];
echo $dropDownSelection
//$dropDownSelection = $dropDownSelection . "wurde verarbeitet!";

?>

Now, when running this code in my browser (current chrome) and clicking the "clickme!" button, it throws the following error to the console:

MyFirstPhP.js:45 Uncaught TypeError: Cannot read property 'catchDropDownSelection' of undefined
    at HTMLButtonElement.<anonymous> (MyFirstPhP.js:45)
    at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
    at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)

Why does it do that? At least to my understanding, everything should have been inherited correctly.

You should create an instance of _userData_ instead of a direct assignment. — Mario Santini, Aug 07 '18 at 09:58
Um, sry I dont understand what you are saying ^^ AFAIK var userDataInstance = new userData; DOES create an instance of Userdata? — ForeFather321, Aug 07 '18 at 10:02
@MarioSantini, that's what OP does, but I agree the naming used is very confusing. — trincot, Aug 07 '18 at 10:02

score 1 · Accepted Answer · answered Aug 07 '18 at 10:32

this in the context of that function is not your object so it doesn't have methods you declared. A way to fix this is that you can bind this, which is the instance of your class to the wrapping function. Like this:

$('#sendDataButton').click(function () {
    this.userDataClone.catchDropDownSelection()
}.bind(this));

This is the fiddle. https://jsfiddle.net/2tgkx6ev/9/

Why is this property undefined?

1 Answers1