js method stored element property cannot access its properties

Question

I made an Ajax request module using javascript and I store its object to form element attribute formElement.ajax.ajaxmoduleA .. like this.

After that I want to use this function more easily something like .. formElement.ajaxA() or assign the function directly on submit event but only I can get is Cannot read properties of undefined. I presume this happens from this command inside of object.

class A {
    constructor() {
        this.a = 'a';
    }

    getA() {
        return this.a;
    }
}

el = document.querySelector('#updateNameForm');
el.A = new A;
el.B = el.A.getA;

When I el.A.getA.call() console, same error pops.. How can I assign object function into element property? How about on event?

Answer 1

1. You need to use bind to ensure that this is being handled correctly.

2. You forget to add open/close parentheses to your constructor call: new A().

class A {
    constructor() {
        this.a = 'a';
    }

    getA() {
        return this.a;
    }
}

const el = document.querySelector('#updateNameForm');
el.A = new A();
el.B = el.A.getA.bind(el.A);
console.log(el.B())

<div id="updateNameForm">Form</div>

Answer 2

It might be, because you're syntax is off. You need paranthesis to instantiate a new class or invoke a method:

el = document.querySelector('#updateNameForm');
el.A = new A();
el.B = el.A.getA();

Answer 3

Try fix the line:

el.A = new A();

Answer 4

The constructor method is a special method of a class for creating and initializing an object instance of that class that will be initialized by using the 'new' key word forward by the class name and the () parentheses after it

class A {
    constructor() {
        this.a = 'a';
    }

    getA() {
        return this.a;
    }
}

el = document.querySelector('#updateNameForm');
el.A = new A()
el.B = el.A.getA;