undefined variables in javascript class

I'm having trouble running and understanding classes in javascript. I am experimenting this with a simple app that I made. The end goal of it is just to grab names from a textarea, store that in an array, and then perform actions on it such as displaying them to the screen or shuffling them. To do this, I made 2 classes. One for storing the names to an array and then another that extends from this class to manipulate the array - just for the sake of organization. Here's my code:

Store names to array

import $ from 'jquery';

class SaveInput {

  // dom selection usually and firing events when a page loads.
  constructor(){
    this.mainText = $('.main-text');
    this.names = [];
    this.events();
  }

  //events to watch for such as click
   events() {
    // save names to array, no submit button
    this.mainText.blur(this.saveNameIndex.bind(this));
  }

  // methods to be called from events

  // save names without submitting
   saveNameIndex() {
    let namesResult = this.names = this.mainText.val().split('\n');
     return namesResult;
  }
}

export default SaveInput;

Maniuplate Array

import $ from 'jquery';
import SaveInput from './SaveInput';

class Display extends SaveInput {
  // dom selection usually and firing events when a page loads.
  constructor(names){
    super(names);

    this.h1= $('h1');
    this.events();
  }


  //events to watch for such as click
    events(){
    this.h1.click(this.log.bind(this));
  }

  // methods to be called from events

  //display images with names
  log () {
    console.log('test');
  }

}

export default Display;

It doesn't matter what I do, as you can see from my 2nd class that I was just trying to test by click an h1 tag to console log some text. I always get the same error when the app loads:

App.js:10522 Uncaught TypeError: Cannot read property 'click' of undefined
    at Display.events (App.js:10522)
    at Display.SaveInput (App.js:96)
    at new Display (App.js:10509)
    at Object.defineProperty.value (App.js:10412)
    at __webpack_require__ (App.js:20)
    at Object.defineProperty.value (App.js:63)
    at App.js:66

The only thing I want from the saveInput class is the names array so I can pass it on and there seems to be some conflict when I extend that class. What am I missing?

1 answer

  • answered 2018-01-14 04:29 jfriend00

    When you create a Display object, it first calls the base object's constructor. That SaveInput constructor calls this.events() which you have overridden in the derived Display class. That overridden implementation is expecting this.h1 to be set, but it isn't set yet, thus the error you see.

    I don't really understand what you're trying to do here to know what fix to suggest, but this is a timing issue based on what happens in the constructor and what the derived class is ready for. Probably you should take some stuff out of the constructor so the object can get fully formed before you call this.events().

    Also, if you expect the SaveInput version of events() to get called, you need to add super.events() to the Display implementation of events() so the base object's version gets called too.