Cannot assign functions to "onclick" from imported class without anonymous function?

Question

I have two js files: index.js and TaskList.js (in which I created class "TaskList" then export to index.js).

I want to assign method "sortTaskAsc()" of class "TaskList" to event "onclick" on a button. So in index.js, when I write like this with anonymous function, it works:

getElementByID("btn-sortDown").onclick = () => {taskList.sortTaskAsc()}

but when I want to try this way, it doesn't work any more:

getElementByID("btn-sortDown").onclick = taskList.sortTaskAsc

I notice that when I use the second way for the functions inside index.js, they all work. But when I use with functions from an imported class, they won't. In console tab it says some error about "undefined".

Please help me understand the reason for this. Thank you guys.

Maybe because you cannot bind a method of an object as a callback (event) function? — Mr. Polywhirl, May 21 '21 at 15:18
Does this help you https://stackoverflow.com/questions/44590393/es6-modules-undefined-onclick-function-after-import ? — Tushar Shahi, May 21 '21 at 15:21
You have misspelled `getEleElementByID` in the second try. Maybe that is the reason? — Chin. Udara, May 21 '21 at 15:22
Thanks Udara for reminding. But actually I didn't mispell in my actual code. Just a mistake when typing this question. — kevinV, May 21 '21 at 15:40

score 0 · Answer 1 · answered May 21 '21 at 15:46

Method sortTaskAsc of TaskList is binded with relevant element because of you use "function" statement.

class TaskList {
    sortTaskAsc() {
        console.log(this);
    }
}

let taskList = new TaskList();

getElementByID("btn-sortDown").onclick = taskList.sortTaskAsc
//onclick binds the function with element btn-sortDown. `this` gives an element.

getElementByID("btn-sortDown").onclick = () => taskList.sortTaskAsc()
//Arrow functions are not binded with anything.
//Therefore `this` doesn't be corrupted and it gives the class.

Cannot assign functions to "onclick" from imported class without anonymous function?

1 Answers1