0

I tried to get an index that I don't get right away, but I don't know how to do it correctly.

I created a quick example where there are 2 buttons and accessing them. But I always get only 0 index.

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));  
const btns = document.querySelectorAll('button') 
const btnsArr = [...btns];
let index = 0; 

const asyncTestFunction = async () => { 
  for (let i = 0; i<2; i++) { 
   await sleep(5000); 
   index = i; 
   console.log(index, 'loop'); 
  }
} 

asyncTestFunction(); 

btnsArr[index].addEventListener('click', () => { 
  console.log(index, 'index - EventListener')
}) 
<html>
  <head>
    <meta charset="UTF-8">
    <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
  </head>
  <body>
    <button >My other page click1</button>
    <button >My other page click2</button> 
    <script src="script.js"></script>
  </body>
</html>

I don't get the second button event.

This is due to time, I'm not waiting for the index to be received because I don't know how to do it correctly.

WalkMess
  • 109
  • 4
  • @HassanImam What did you just say, I didn't understand you! I hang the event listener on the index button, and it comes asynchronously. The JS code fires immediately and executes as for the 0th, it knows nothing about the first, I understand that you need to wait, but I do not know how to do it in this context of the event. – WalkMess Oct 24 '21 at 19:02
  • It's not clear what you're trying to do here. Do you expect `btnsArr[index].addEventListener` to be executed again whenever the value of `index` changes later? Do you want to attach a single listener only? If yes, why not just set `index = 1;`, why loop at all? If no, why not simply place the `addEventListener` calls inside the loop? – Bergi Oct 24 '21 at 19:09
  • Don't use a global variable. Make your `asyncTestFunction` `return` the value, then write `asyncTestFunction().then(index => { btnsArr[index].addEventListener(…); });` – Bergi Oct 24 '21 at 19:11
  • In that first line you have `new Promise((resolve))` but I believe you need to instead have `return new Promise((resolve))` which should make it correctly away for the promise to return – charlie-map Oct 24 '21 at 19:11
  • 1
    In your code `btnsArr[index]` is equivalent to `btnsArr[0]` because `index == 0` when you add the click-event listener. If you want to add the same event listener to each button, try `for (let btn of btnsArr) btn.addEventListener(...)`. This way pressing any of the two buttons within 10 s will result in logging `0` and after 10 s it will result in logging 1. – Marcello Del Buono Oct 24 '21 at 19:13
  • @charlie-map The `sleep` implementation is fine, it uses the concise body form of arrow functions that implicitly return the expression result. – Bergi Oct 24 '21 at 19:14
  • @Bergi This is a quick example and it's not written that way for nothing. I have a complex code logic and getting an index is a prerequisite from the loop, and not going through everything and everyone. Is it a good idea to put an event in a loop? It will work, I know, but won't it mess up the code. – WalkMess Oct 24 '21 at 19:35
  • @WalkMess If you want to install multiple event listeners, yes, put them in a loop. Nothing wrong with that. It might help if you could post your actual code. – Bergi Oct 24 '21 at 19:59

0 Answers0