Javascript-форум - Обработка события в теле цикла

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Обработка события в теле цикла (https://javascript.ru/forum/events/46158-obrabotka-sobytiya-v-tele-cikla.html)

Обработка события в теле цикла

Разметка содержит 3 элемента div класса 'div', js файл содержит следующий код:

var elements = document.getElementsByClassName('div');
for(var i=0;i<elements.length;i++){
elements[i].onclick=function (){
elements[i].style.background="red";
alert('blah-blah');
};
}

Я полагаю, что при клике на любом из элементов div должен изменяться этот элемент(на котором кликнули), но на деле изменяется только третий(причем при щелчке на любом из трёх). Здесь не могу понять логику совместной работы цикла и обработчика: ведь если стиль применяется лишь к третьему элементу(то-есть индекс elements'a внутри обработчика всегда устанавливается в последнюю позицию) то логично предположить, что обработчик должен устанавливаться лишь для третьего элемента(то есть индекс elements'a, на который вешается onclick, также будет устанавливаться в последнюю позицию),следовательно обработчик будет срабатывать только при клике на третьем элементе(на деле срабатывает на всех элементах). Объясните пожалуйста логику работы этого скрипта и в чём моя ошибка.

<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<script>
  var elements = document.querySelectorAll('div.col'),
    len = elements.length,
    clickdiv = function () {
      this.style.background = "red";
      alert('blah-blah');
    };
  for (var i = 0; i < len; i++) {
    elements[i].onclick = clickdiv;
  }
</script>

Хорошо, а как тогда быть если нужно, чтобы при клике по одному из описанных мной элементу менялся не сам этот элемент,а некий другой, соответствующий ему по индексу?

elements - это массив ваших дивов в примере, 1 индекс 0
console.log(elements);
чтобы обратится к нужному элементу
elements[0] - 1 элемент
elements[1] - 2 элемент
elements[2] - 3 элемент
elements[2].style.background = "red";

Цитата:

Сообщение от Poznakomlus

чтобы обратится к нужному элементу

--- это спам )))
Poznakomlus,
где индекс то взять в вашем коде его нет -- у вас this

рони,

Цитата:

Сообщение от рони

--- это спам )))

если я неправильно понял :)
понятно, что по ссылке пример лучше
но и такой имеет право на жизнь

<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="rez">Rezult 1</div>
<div class="rez">Rezult 2</div>
<div class="rez">Rezult 3</div>
<script>
  var elements = document.querySelectorAll('div.col'),
    result = document.querySelectorAll('div.rez'),
    len = elements.length,
    clickdiv = function () {
      result[this.innerHTML - 1].style.background = "red";
      alert('blah-blah');
    };
  for (var i = 0; i < len; i++) {
    elements[i].onclick = clickdiv;
  }
</script>

:write:

<!DOCTYPE HTML>

<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>
</head>

<body>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="rez">Rezult 1</div>
<div class="rez">Rezult 2</div>
<div class="rez">Rezult 3</div>
<script>
  var elements = document.querySelectorAll('div.col'),
    result = document.querySelectorAll('div.rez'),
    len = elements.length,
    clickdiv = function (i) { return function () {
      result[i].style.background = "red";
      alert(i); }
    };
  for (var i = 0; i < len; i++) {
    elements[i].onclick = clickdiv(i);
  }
</script>

</body>
</html>

:write:

<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="rez">Rezult 1</div>
<div class="rez">Rezult 2</div>
<div class="rez">Rezult 3</div>
<script>
  var elements = document.querySelectorAll('div.col'),
    result = document.querySelectorAll('div.rez');
  [].forEach.call(elements, function (el, i) {
    el.onclick = function () {
      result[i].style.background = "red";
      alert(i);
    }
  });
</script>

В моём примере сей глюк связан с областями видимости переменных.Проблема решается посредством замыкания.Спасибо за помощь