0

I have the code below, which is working (i.e. I can print the index to the console). However, I'd like to use that index outside of the forEach loop. I have tried random things like returning the tabIndex, wrapping it all in a function etc. but I don't get it right or understand the steps needed.

The plan is to use the index to fetch data from a JSON file.

Any suggestions on how to make the result from tabIndex globally available?

/* DESTINATION TABS */
    const destinationTabs = document.querySelectorAll(".destination-info--tab");
    
    /* Get index of the clicked tab */
    destinationTabs.forEach((destinationTab) => {
      destinationTab.addEventListener("click", (e) => {
        const tabIndex = Array.from(destinationTabs).indexOf(e.target);
        console.log(tabIndex);
      });
    });
splnter
  • 25
  • 3
  • 3
    if you use map instead of forEach you can return an array of tabIndex – cmgchess Feb 24 '22 at 16:59
  • _"/* Get index of the clicked tab */"_ - You're adding a `"click"` handler to the "tabs". This doesn't "get" you anything. – Andreas Feb 24 '22 at 17:01
  • Add one click handler on the parent element. In that handler find the clicked tab (its index), and then use it in that same click handler to do whatever you need to do with the index. – Andreas Feb 24 '22 at 17:02
  • I'm not sure I understand your question. Do you want *all* results from the array, or just the specific one? – Joel Hager Feb 24 '22 at 17:05
  • Clicking a "tab" is an asynchronous action -> [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) – Andreas Feb 24 '22 at 17:13
  • 1
    "*I'd like to use that index outside of the forEach loop*" that's not how event-driven code works, though. You add the event listeners *now* but they executed *later*. When somebody clicks. And by the time somebody clicks, the code execution is way past that point. What you actually *need* to do is do whatever you want to do with the index *in the event listener*. – VLAZ Feb 24 '22 at 17:13
  • Outside of "how events work", I'd recommend you don't do any of the index lookup like that. Or *at all*. You are doing very redundant lookups when you have the item directly. `.forEach` takes a second parameter which is the index anyway, so you could use that directly *if really needed*, however, *this should not really be needed*. Whatever you do is more complex than it needs to be. With all that said, you don't even need that many event listeners - you can simplify to just one [via event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). – VLAZ Feb 24 '22 at 17:16
  • Sorry for the unclear question. What I have at this point gives the correct index every time one of my four tabs are clicked. That is what I'm printing to the console. What I guess I want instead is to assign it to a variable outside the loop. I only want the specific one that is clicked – splnter Feb 24 '22 at 17:17
  • 1
    "*What I guess I want instead is to assign it to a variable outside the loop.*" no you don't want that. Or you do *now* until you realise that is useless to you, since you cannot react on the variable being assigned. If you need to do something with that global variable you have to keep checking if it's changed. Yet if you want to do something you *actually* want to handle your value it in the event listener. – VLAZ Feb 24 '22 at 17:21

0 Answers0