Execute function when condition is met

Question

i have a probably stupid question, but i cant figure it out.
In a piece of code below I have a global variable guestsTotal and event hadler where this variable is incremented by 1 by clicking button.
I'm trying to display in console some message when guestsTotal will be 12. But this doesn't work. My friend said that this wouldn't work because event hadlers are asynchronous in JS. And my script was already executed.
So is there a way to do some actions when the value of guestsTotal will be 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')
}

as stated by Ergis your code already run and checked this condition once when compiling and there is no way to run it other then to move it inside the event listener where you can "wait" for the value to become 12 and then run the console log — Jacck Mark, Feb 03 '22 at 08:32

score 0 · Answer 1 · answered Feb 03 '22 at 08:32

0

Seeing as the

if(guestsTotal === 12) {
  console.log('message');
}

is outside of the Event Listener it will not be executed.
By putting it inside of the Event Listener like follows it will be executed when guestsTotal is 12

adultButtonPlus.addEventListener('click', function (evt) {
   adultTotal++
   guestsTotal++
   adultCounter.textContent = adultTotal
   guestsInput.value = `${guestsTotal} guests`
   if(guestsTotal === 12) {
     console.log('message');
   }
})

answered Feb 03 '22 at 08:32

Raffael

249
2
7

I tried this and this worked. But I have 6 event handlers and condition is getting complicated. And I need to put every condition in every event hadler? – prok05 Feb 03 '22 at 08:35
@prok05 All event handler working on same variable `guestsTotal`. – Faheem azaz Bhanej Feb 03 '22 at 08:41

score 0 · Accepted Answer · answered Feb 03 '22 at 08:37

You can do it two ways:

Check for the condition inside your event handler. This is very simple to do:

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>

Or make use of getters and setters to listen to value changes in your guestsTotal count.

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>

@prok05 Or you can make a method for increament `guestsTotal` for every event listener — Faheem azaz Bhanej, Feb 03 '22 at 08:46

Execute function when condition is met

2 Answers2