How to call a class method from the button in js?
Question
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>
2 answers
solution1
1 2022-02-02 07:51:28
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>
solution2
0 2022-02-02 07:52:16
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.