Как правильно работать с двумя массивами одновременно?

Question

[Максим js]

Есть список элементов внутрь которых добавлены другие им присвоено свойство Display: none;
Пытаюсь написать функцию => при клике на любой из элементов из списка свойство внутреннего менялось на Display: block; Не могу понять как работать в таком случае с двумя массивами? и как не активировать весь массив, а только на том элементе на который кликнул?

document.querySelectorAll(".app__item").onclick = function() {
  let equalizer = document.querySelectorAll(".equalizer");
  for (let i = 0; i < equalizer.length; i++) {
    equalizer[i].style.display = "block";
  }
}

Comments

[WapSter]

Контекст "this"

Answer 1

[Дмитрий Беляев]

Ну во-первых, querySelectorAll возвращает коллекцию NodeList а не массив, это важно понимать.
Во-вторых, у NodeList нет сеттера onclick в отличии от элементов, а следовательно Ваше присваивание туда функции просто не сработает.
В-третьих, не стоит пользоваться сеттерами вида oneventname, так как это чревато проблемами, используйте метод addEventListener
В-четвертых, querySelectorAll можно использовать не только на document, но и на элементах
В-пятых, в обработчик события приходит объект события в качестве аргумента, в котором есть свойство target - элемент на котором событие произошло

По-итогу:

function listener(event) {
  const target = event.target.closest('.app__item');
  target.querySelectorAll('.equalizer').forEach(
    elem => elem.style.display = 'block'
  );
  // так как дальнейшие клики будут гонять бесполезный цикл, то лучше отписаться
  target.removeEventListener('click', listener);
}
document.querySelectorAll('.app__item').forEach(
  item => item.addEventListener('click', listener)
);

Answer 2

[historydev]

Как сказал Дмитрий Беляев, ваш код с ошибками, для перебора с назначением обработчика нужен следующий код:

document.querySelectorAll(".app__item").map(item => {
    item.onclick = function() {
        document.querySelectorAll(".equalizer").map(children => {
              children.style.display = 'block';
        });
    }
});