How to call a class method from the button? When the code is like below I get an error:
Uncaught TypeError: Account.add is not a function
at HTMLButtonElement.onclick
class Account {
#count;
constructor(name, count) {
this.name = name;
this.#count = count;
}
add() {
return this.#count + 1;
}
}<h1>Something about ...</h1>
<div>
<h1 id='sth'>
Something
</h1>
</div>
<button type="button" onclick="Account.add()">Click me</button>There are two ways of doing that. One is the static method and the second is initializing your class. Since you have a constructor setting some vars which are being used in add(), you need to initialize the class before calling its methods.
class Account {
#count;
constructor(name, count) {
this.name = name;
this.#count = count;
}
add() {
return this.#count + 1;
}
}
const account = new Account(); // <----- Initialize class<h1>Something about ...</h1>
<div>
<h1 id='sth'>
Something
</h1>
</div>
<button type="button" onclick="account.add()">Click me</button>You can use it if it is an static method, like this:
class Account {
#count;
constructor(name, count) {
this.name = name;
this.#count = count;
}
static add() {
return this.#count + 1;
}
}
// but now you will get different error since static methods have different `this`if it is not static method you need to initialize object on whom that method will be called. For example:
class Account {
#count;
constructor(name, count) {
this.name = name;
this.#count = count;
}
add() {
return this.#count + 1;
}
}
const newAcc = new Account("name", 0);And then from your template you can do:
<body>
<h1>Something about ...</h1>
<div>
<h1 id='sth'>
Something
</h1>
</div>
<button type="button" onclick="acc.add()">Click me</button>
</body>