Tengo una pregunta probablemente estúpida, pero no puedo resolverla.
En un fragmento de código a continuación, tengo una variable global guestTotal y un controlador de eventos donde esta variable se incrementa en 1 al hacer clic en el botón.
Estoy tratando de mostrar en la consola algún mensaje cuando el total de invitados sea 12. Pero esto no funciona. Mi amigo dijo que esto no funcionaría porque los controladores de eventos son asincrónicos en JS. Y mi script ya fue ejecutado.
Entonces, ¿hay alguna forma de realizar algunas acciones cuando el valor de guestTotal sea 12?
let adultTotal = 0 let childTotal = 0 let babyTotal = 0 let guestsTotal = 0 adultButtonPlus.addEventListener('click', function (evt) { adultTotal++ guestsTotal++ adultCounter.textContent = adultTotal guestsInput.value = `${guestsTotal} guests` }) if (guestsTotal === 12) { console.log('message') }viendo como el
if(guestsTotal === 12) { console.log('message'); } está fuera del detector de eventos, no se ejecutará.
Al colocarlo dentro del detector de eventos de la siguiente manera, se ejecutará cuando el total de invitados sea 12
adultButtonPlus.addEventListener('click', function (evt) { adultTotal++ guestsTotal++ adultCounter.textContent = adultTotal guestsInput.value = `${guestsTotal} guests` if(guestsTotal === 12) { console.log('message'); } })Puedes hacerlo de dos maneras:
Verifique la condición dentro de su controlador de eventos. Esto es muy sencillo de hacer:
let adultTotal = 0 let childTotal = 0 let babyTotal = 0 let guestsTotal = 0 let adultButtonPlus = document.querySelector('#aButton'); adultButtonPlus.addEventListener('click', function (evt) { adultTotal++ guestsTotal++ //adultCounter.textContent = adultTotal //guestsInput.value = `${guestsTotal} guests` if (guestsTotal === 12) { console.log('message') } }); <button id="aButton">Adult</button> O haga uso de getters y setters para escuchar los cambios de valor en su recuento total de invitados.
let adultTotal = 0 let childTotal = 0 let babyTotal = 0 const guestsTotal = { count: 0, get total() { return this.count; }, set total(newCount) { this.count = newCount; if(this.count === 3){ console.log('count is 3'); } else if(this.count === 12){ console.log('count is 12'); } } }; let adultButtonPlus = document.querySelector('#aButton'); adultButtonPlus.addEventListener('click', function (evt) { adultTotal++ guestsTotal.total = guestsTotal.total+1; //adultCounter.textContent = adultTotal //guestsInput.value = `${guestsTotal} guests` if (guestsTotal === 12) { console.log('message') } }); <button id="aButton">Adult</button>