Спасибо всем)
Делаю правку своего ответа на следующий день. Разобрался).
1. Есть массив DOM элементов, повешен обработчик, КЛИКАЕМ на любом элементе в начале и получаем его переменную Index.
2. Index теперь видна во всем внешнем коде. ( еще раз - ПОСЛЕ клика). В редакторе кода вы просто так не получите значение Index через console.log(indexNum). Но в Devtools - получите.
3. Также, если внутри обработчика вызвать функцию и передать в аргументе Index то при клике функция сразу отработает и выдаст значение в консоль
- Это уже решает мою задачу, так как ранее я считал, что получить Index смогу только после дополнительных кликов в других местах кода и прочих танцев.
На всякий случай еще раз повторяю код с моими комментами, для себя и тех кто также не видит в консоли значения в глобальной переменной.
<div class="box ">1</div>
<div class="box ">2</div>
<div class="box ">3</div>
//Для тех кто в танке - далее все действия и комменты рассматриваются только после клика на DOM элементе
let indexNum; // глоб. переменная, но можно и без нее выводить Index как есть
let arr = []; // макссив для примера
console.log(arr); // получу индекс из массива DOM, но увидеть весь массив arr можно в консоли DevTools
console.log(arr[0]); // также смотри в консоли DevTools
// Вызвали ф. из обработчика и передали Index
function test(index) {
let a = index;
console.log(a); // выдает после клика, т.к. функция начала работать после клика и получила значение Index
console.log(`Из массива arr ${arr[0]}`);
}
console.log(indexNum); // так не увидешь никогда
box.forEach((item, index) => {
item.addEventListener('click', () => {
indexNum = index;
arr.push(index); // пушим для примера в массив arr
test(indexNum); //вызываем для примера ф. и передаваем значение именно отсюда
});
});
