"x is not a function" in js when using class

Question

I am new to JS and especially class in JS. I don't fully understand how classes work. Please help me in the following question. This is a simple page with a button. I want it to run a function (doThis()) after clicking the button. But it gives an error saying the function is not defined.

class Test {
    constructor() {
        this.button = document.getElementById("but1");
        this.button.addEventListener("click", this.butClick);
    }
    butClick() {
        console.log("clicked");
        this.doThis();
    }
    doThis(){
        console.log("Inside doThis")
    }
}
t1 = new Test();

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <button id="but1">Click me</button>
    <script src="test.js"></script>
</body>
</html>

Inside of a clicked event listener, this refers to the button, not your class. I can't tell you why its that way, but that should hopefully help you fix the problem. — GoldenretriverYT, Dec 06 '21 at 11:44
You could bind the function, but an easier option is to just use an arrow function -> ` this.button.addEventListener("click", () => this.butClick());` — Keith, Dec 06 '21 at 11:44

score 2 · Accepted Answer · answered Dec 06 '21 at 11:47

2

this.button.addEventListener("click", this.butClick); should be this.button.addEventListener("click", this.butClick.bind(this));.

Without bind(this), the this inside butClick is just the button element, not the class Test.

answered Dec 06 '21 at 11:47

rubys

583
3
11

Maye Edwin · Answer 2 · 2021-12-06T11:59:31.737

-1

class Test {
constructor() {
}
butClick() {
    console.log("clicked");
    this.doThis();
}
doThis(){
    console.log("Inside doThis")
  }
}

t1 = new Test();

const button = document.getElementById("but1")
button.addEventListener('click', event => {
event.preventDefault()
// Call doThis method on t1, the instance...
t1.doThis()
})

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <button id="but1">Click me</button>
    <script src="test.js"></script>
</body>
</html>

I have done some short and helpful article on using classes in JS, should help, go to the article here.

edited Dec 06 '21 at 11:59

answered Dec 06 '21 at 11:45

Maye Edwin

49
5

2

That's not a good choice, especially if you have multiple instances. And with it been a class that is often likely. – Keith Dec 06 '21 at 11:46

"x is not a function" in js when using class

2 Answers2