¿Cómo llamar a un método de clase desde el botón? Cuando el código es como el siguiente, aparece un 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>Hay dos formas de hacerlo. Uno es el método estático y el segundo es inicializar su clase. Dado que tiene un constructor configurando algunos vars que se utilizan en add(), debe inicializar la clase antes de llamar a sus métodos.
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>Puedes usarlo si es un método estático, como este:
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`si no es un método estático, debe inicializar el objeto en el que se llamará a ese método. Por ejemplo:
class Account { #count; constructor(name, count) { this.name = name; this.#count = count; } add() { return this.#count + 1; } } const newAcc = new Account("name", 0);Y luego desde tu plantilla puedes hacer:
<body> <h1>Something about ...</h1> <div> <h1 id='sth'> Something </h1> </div> <button type="button" onclick="acc.add()">Click me</button> </body>