event listener - How do I get the variable value outside of EventListener function in Javascript?

Question

I have this code where I want to access the variable value outside the EventListener function to capture which button was clicked so that I can show a modal window with the relevant button value. Please help.

Here, in the code below, I want to assign value to the variable wordClicked.

const btn1OpenModal = document.querySelector(".word-one");

const btn2OpenModal = document.querySelector(".word-two");

const btn3OpenModal = document.querySelector(".word-three");

const btn4OpenModal = document.querySelector(".word-four");

export let wordClicked;

btn1OpenModal.addEventListener("click", function () {
  openModal();
  wordClicked = "firstWord";
});

btn2OpenModal.addEventListener("click", function () {
  openModal();
  wordClicked = "secondWord";
});

btn3OpenModal.addEventListener("click", function () {
  openModal();
  wordClicked = "thirdWord";
});

btn4OpenModal.addEventListener("click", function () {
  openModal();
  wordClicked = "fourthWord";
});

question from:https://stackoverflow.com/questions/65952537/how-do-i-get-the-variable-value-outside-of-eventlistener-function-in-javascript

Answer 1

You can't export a variable, only a value.

At the time you export the value of wordClicked, that value is undefined.

You can't change the exported value later.

---

You could export an object and then later change a property of that object, but likely you will need to make the event listener functions themselves responsible for opening the model.