How do I access an object created within an addEventListener?

Question

In the code shown below, I have a function that adds an object to an array. This object has a property named status which has a value of true. An addEventListener for a button named "check for true object" is able to access the 'true' object and log it in the console. I also have an addEventListener for a button which adds another object to the array. This added object also has a property named status which has a value of false. Then, there is an addEventListener for a button named "check for false object" which is to access the added 'false' object and log it in the console. However, when this "check for false object" button is clicked, it logs undefined even though the 'false' object has already been aded to the array. How can I solve this problem?

const button1 = document.querySelector('#btn-one');
const button2 = document.querySelector('#btn-two');
const button3 = document.querySelector('#btn-three');

const MainArrayModule = (() => {
  let mainArray = [];

  function MainArrayObjCreator(name, status) {
    return {name, status};
  }

  function createMainArrayObj() {
    let mainObj = MainArrayObjCreator('main', true);
    mainArray.push(mainObj);

    console.log(mainArray);

    button1.addEventListener('click', () => {
      let otherObj = MainArrayObjCreator('other', false);
      mainArray.push(otherObj);
      console.log(mainArray);
    });
  }

  return {mainArray, createMainArrayObj};
})();

const CheckArrayModule = (() => {
  MainArrayModule.createMainArrayObj();
  
  let trueObject = MainArrayModule.mainArray.find(object => object.status === true);
  let falseObject = MainArrayModule.mainArray.find(object => object.status === false);
  
  function logObject() {
    button2.addEventListener('click', () => {
      console.log(trueObject);
    });

    button3.addEventListener('click', () => {
      console.log(falseObject);
    });
  }

    return {logObject};
})();


const runFunctions = (() => {
    CheckArrayModule.logObject();
})();

body {
  display: flex;
  height: 100vh;
  justify-content: space-evenly;
  align-items: center;
}

<button id="btn-one">
  Add 'false' object
</button>
<button id="btn-two">
  Check for 'true' object
</button>
<button id="btn-three">
  Check for 'false' object
</button>

Answer 1

When you run the CheckArrayModule function, it is ran once. In this you define false object. Because the false object does not exist at that time, the value of falseObject is undefined.

Short Answer: When you reference falseObject, it does not search for the false object because it already has when the object did not exist.

To fix this, move the two variable declarations inside your event listener so they are ran whenever the button is clicked.

The following example should work how you want it to.

const button1 = document.querySelector('#btn-one');
const button2 = document.querySelector('#btn-two');
const button3 = document.querySelector('#btn-three');

const MainArrayModule = (() => {
  let mainArray = [];

  function MainArrayObjCreator(name, status) {
    return {name, status};
  }

  function createMainArrayObj() {
    let mainObj = MainArrayObjCreator('main', true);
    mainArray.push(mainObj);

    console.log(mainArray);

    button1.addEventListener('click', () => {
      let otherObj = MainArrayObjCreator('other', false);
      mainArray.push(otherObj);
      console.log(mainArray);
    });
  }

  return {mainArray, createMainArrayObj};
})();

const CheckArrayModule = (() => {
  MainArrayModule.createMainArrayObj();
  
  function logObject() {
    button2.addEventListener('click', () => {
        let trueObject = MainArrayModule.mainArray.find(object => object.status === true);
      console.log(trueObject);
    });

    button3.addEventListener('click', () => {
        let falseObject = MainArrayModule.mainArray.find(object => object.status === false);
      console.log(falseObject);
    });
  }

    return {logObject};
})();


const runFunctions = (() => {
    CheckArrayModule.logObject();
})();

body {
  display: flex;
  height: 100vh;
  justify-content: space-evenly;
  align-items: center;
}

<button id="btn-one">
  Add 'false' object
</button>
<button id="btn-two">
  Check for 'true' object
</button>
<button id="btn-three">
  Check for 'false' object
</button>