Tengo esta variable de conteo. Cada vez que presiono un botón determinado, la variable de conteo cuenta uno y comienza con 0 por defecto. Esto funciona, pero cuando trato de usarlo fuera de la clase, no recuerda el valor. Sé que esto no debería funcionar, pero no tengo idea de cómo hacerlo bien.
class navigation{ constructor() { this.count = 0; } NextBtn(){ this.count++ console.log(this.count); } ResultBtn(){ console.log(this.count) } }Quiero que el valor esté disponible en todas partes como aquí:
let nav = new navigation(); const count = nav.count; btn.addEventListener("click", function (btn) { nav.NextBtn(); console.log(count) })Pero de los registros obtengo el valor predeterminado que es 0. ¿Cómo hago esto bien?
Si desea que count sea una propiedad pública en cada instancia de Navigation , debe consultarlo correctamente desde fuera de la instancia del objeto, utilizando nav.count .
Observe cómo, a continuación, cada instancia de Navigation mantiene su propia variable de instancia pública de count .
class Navigation { constructor() { this.count = 0 } count = 0 next() { this.count++ console.log("From inside `next`: ", this.count) } } let nav1 = new Navigation() let btn1 = document.getElementById("btn1") let nav2 = new Navigation() let btn2 = document.getElementById("btn2") btn1.addEventListener("click", function (btn) { nav1.next() console.log("From inside btn1 event listener: ", nav1.count) }) btn2.addEventListener("click", function (btn) { nav2.next() console.log("From inside btn2 event listener: ", nav2.count) }) <button id="btn1">Click me 1</button> <button id="btn2">Click me 2</button>Alternativamente, si crea una variable de ámbito de bloque fuera de la clase, el código la compartirá en el bloque actual.
Observe cómo, a continuación, el count de variables de ámbito de bloque es compartido por cada instancia de Navigation que creamos.
let count = 0 class Navigation { next() { count++ console.log("From inside `next`: ", count) } } let nav1 = new Navigation() let btn1 = document.getElementById("btn1") let nav2 = new Navigation() let btn2 = document.getElementById("btn2") btn1.addEventListener("click", function () { nav1.next() console.log("From inside btn1 event listener: ", count) }) btn2.addEventListener("click", function () { nav2.next() console.log("From inside btn2 event listener: ", count) }) <button id="btn1">Click me 1</button> <button id="btn2">Click me 2</button>Está instanciando una nueva navegación cada vez que hace clic, quiere mover eso afuera:
class navigation{ constructor() { this.count = 0; } NextBtn(){ this.count++ console.log(this.count); } ResultBtn(){ console.log(this.count) } } const next = document.getElementById("next"); const result = document.getElementById("result"); const nav = new navigation(); next.addEventListener("click", function (e) { nav.NextBtn(); }) result.addEventListener("click", function (e) { nav.ResultBtn(); }) <button id="next">Next</button> <button id="result">Result</button>EDITAR: se agregó un segundo botón para mostrar cómo agregar oyentes independientes