Javascript addEventListener within if statement (which checks a state)

I am trying to write a simple language game, where the user can begin the game by clicking whether they want to translate or fill gaps. As I want different code to run depending on whether the user has selected translate or gapfill, I thought that having a 'state' variable which is changed depending on the game mode, and then having an eventlistener within an 'if' statement, would work.

I can check on the console that the state is getting set to 0, but the event listener within the if statement doesn't run. It works fine if the 'if' statement isn't there. Is this something to do with the if statement only running at the moment the state is set to 0?

let state = 0;

document.querySelector('#translations').addEventListener('click', (e) => {
  state = 1;
  console.log(state);
});
document.querySelector('#gapfill').addEventListener('click', (e) => {
  state = 2;
});

if (state === 1) {
  answerBtn.addEventListener('click', (e) => {
    console.log('hello from translations');
    if (document.querySelector('input').value == sentences[quNum].sentence) {
      quNum++;
      displayQu();
    } else {
      sentences.splice(quNum + 5, 0, sentences[quNum]);
      quNum++;
      displayQu();
    }
  });
}