Как связать элементы двух массивов?

Question

[Михаил]

есть два массива. Ну, вернее, это элементы одного класса, и элементы другого класса. Получается, что это два массива. Надо, чтобы при клике на первый элемент первого массива мы получали первый элемент второго массива, при клике на второй элемент - второй и т.д. Т.е. есть ли какой-то способ получать по индексу элементы второго массива. Я сделал пример, где есть 5 квадратов - кнопок, и есть 5 квадратов - целей. Хочу при клике на первый "квадрат - кнопку" покрасить первый "квадрат - цель" и т.д.
https://codepen.io/mk3mk/pen/YBxPZj?editors=0011

Answer 1

[Владимир Проскурин]

У вас уже в коде куча ошибок.
1) вместо querySelector нужно использовать querySelectorAll, т.к. первый возвращает только один элемент, а второй массив элементов.
2) Чтобы назначить событие группе элементов, недостаточно как в jQuery написать одной строчкой onclick, нужно циклом пройтись по каждому элементу, и повесить на нужное событие обработчик.
3) Можно воспользоваться замыканием, т.е. использовать в качестве общего индекса для массивов, индекс в цикле.

https://codepen.io/anon/pen/RvZaQW?editors=0111

Answer 2

[0xD34F]

const buttons = document.querySelectorAll('.item1');
const targets = document.querySelectorAll('.item2');
const className = 'red';

const updateClass = action => ({ target: t }) => {
  const index = Array.prototype.indexOf.call(buttons, t);
  if (index !== -1) {
    targets[index].classList[action](className);
  }
};

const wrapper = document.querySelector('#wrap1');
wrapper.addEventListener('click', updateClass('add'));
wrapper.addEventListener('dblclick', updateClass('remove'));