Я хочу, чтобы кнопка вызова равняется индексу массива

Question

У меня есть 3 кнопки в html (все они имеют одинаковое имя класса) и массив длиной 3 ... поэтому я хочу вызывать данные в первом индексе, когда я нажимаю первую кнопку. и вызвать данные во втором индексе, когда я нажму вторую кнопку.

и вот мой код:

const infoBTN = document.getElementsByClassName('infoBTN')
const arr = [{name: 'Rawand'} , {name: 'Jack'} , {name: 'Max'}] ;

let num = 0;

const getInfo = function (){
  console.log(arr[num]); 
}

for(let i = 0 ; i<infoBTN.length ; i++){
  num = i;
  console.log('i = ' + i + ' And num = ' + num)
  infoBTN[i].addEventListener('click' , getInfo)
}

Пожалуйста, помогите мне, пожалуйста

Answer 1

Объявите функцию getInfo внутри l oop, чтобы она могла иметь замыкание над индексом i:

const infoBTN = document.getElementsByClassName('infoBTN')
const arr = [{name: 'Rawand'} , {name: 'Jack'} , {name: 'Max'}] ;

for(let i = 0 ; i<infoBTN.length ; i++){
  infoBTN[i].addEventListener('click' , () => console.log(arr[i].name));
}

<button class="infoBTN">click</button>
<button class="infoBTN">click</button>
<button class="infoBTN">click</button>