Javascript-форум - Массив переписывает значение

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Массив переписывает значение (https://javascript.ru/forum/dom-window/37756-massiv-perepisyvaet-znachenie.html)

Массив переписывает значение

var i;
var j;
var strCit = new Array()
window.onload = function()
	{
		var imgCit = new Array()
		for(i=0; i < 100; i++)
		{
			imgCit[i] = document.getElementById("imgCit"+i);
			if (imgCit[i])
			{
				imgCit[i].onclick = bbcode;
				j=i;
			}
		}

	}
function bbcode()
{
      alert(j);
}

В html существуют, на данный момент 5 элементов с id=imgCit64, id=imgCit65, id=imgCit67, id=imgCit68, id=imgCit69. Мне нужно, чтобы при клике на соответствующий элемент выходило соответствующее число (если например, кликну на элемент с id=imgCit67, то alert выводил число 67). Проблема в том, что выводится наибольшее существующее i, то есть в данном примере 69. Как это исправить?

Например, так (коряво):

в 12-й строке bbcode замените на function(){ alert( this.id.replace('imgCit','')*1 ); }

Переменную j и функцию bbcode можно удалить.

Или так, чтобы не перебирать несуществующие картинки

window.onload = function()
{
    var img = document.getElementsByTagName('img'),
        i = 0; 
 
    while (img[i])
    { if ( /^imgCit(\d+)$/.test(img[i].id) )
       { img[i].onclick = function(){ alert( this.id.replace('imgCit','')*1 ); }; }
      i++;
    }
}

var strCit = [] ;
window.onload = function() {
	var imgCit = [] ;
	for(var i=0; i <100; i++) {
		imgCit[i] = document.getElementById("imgCit" + i) ;
		if(imgCit[i]) {
			imgCit[i].onclick = (function(j) {
			return function() {
					bbcode(j) ;
				}
			})(i) ;
		} ;
	} ;
}
function bbcode(j) {
	alert(j) ;
}

Ну а нормальные люди это делают примерно так:

<script>
window.addEventListener('click', function(e){
    if( e = /^imgCit(\d+)$/.exec( e.target.id ) ){
        alert( e[1] )
    }
},false)
</script>
<img id="imgCit68" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>

Aetae,

В IE 8 не пашет)

Цитата:

Сообщение от Demath (Сообщение 249148)

Aetae,

В IE 8 не пашет)

Когда я пишу addEventListener - я подразумеваю навешивание обработчика. Костыли для осла пускай используют свои.

Очевидно, что никто каждый раз не пишет проверку на браузер. У всех есть либо своя мини-либа для работы с событиями, либо чужая мега-либа, либо по-харадкору добавлена своя реализация addEventListener для ie.

Цитата:

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

Проблема в том, что выводится наибольшее существующее i, то есть в данном примере 69. Как это исправить?

прочесть статью про Замыкания
в частности
Пример ошибочного использования

Вариант решения ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
<script>
var i;
//var j;
var strCit = new Array()
window.onload = function()
	{
		var imgCit = new Array()
		for(i=0; i < 100; i++)
		{
			imgCit[i] = document.getElementById("imgCit"+i);
			if (imgCit[i])
			{
				imgCit[i].onclick = bbcode(i);
				//j=i;
			}
		}

	}
function bbcode(i)
{
   return function ()
{
     alert(i);
}
}

</script>
</head>

<body>

<img id="imgCit64" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
<img id="imgCit65" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
<img id="imgCit67" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
<img id="imgCit68" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
<img id="imgCit69" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
</body>

</html>