[ERB]

element = document.getElementById("some_id");

for (var i = 0; i < 10; i++) {
var childElement = document.createElement("span");
childElement.innerHTML = "элемент: №" + i + "<br>";
childElement.addEventListener(
"click",
function() {
alert("элемент: №" + i); // здесь хочу передать параметр к какому то функцию, например "i"
},
false
);
element.appendChild(childElement);
}

Но, при клике к "span" элементам, появляется сообщение: "элемент: №10". Я ожидал номера будут разные и соответствовать номеру каждого элемента. Можете объяснить, почему так происходит?