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

Question

[MamaLuyba]

Добрый день.
Есть абстрактный пример кода:

var days = ['mon', 'thu', 'wen']
var nums = ['12', '24', '30']

 for (var i=0; i<days.length; i++) {
	
	var p = document.createElement('p')
	var ind 
	p.innerHTML = days[i]
	p.setAttribute('onclick', 'alert(nums[i])')
	document.body.appendChild(p)
	alert(nums[i])
}

Нужно, чтобы после создания всех <p> в , по нажатию на <p> выдавалось значение элемента из массива nums, индекс которого равен индексу<p> в массиве days.
Тут получается, что пока идет создание элементов, alert(nums[i]) выдает верные значения. Но как только код завершает выполнение, alert(nums[i]) выдает последний элемент массива, т.к. после завершения цикла, значение var i = 2.
Делал это через .forEach - все нормально работает. Но т.к. в .hta .forEach не поддерживается, нужно переписать это через цикл.
Почему при добавлении атрибута к элементу, в атрибут не записывается текущее значение i ? Т.е. получается, что в атрибуте значение onclick прописывается не как (alert[0]) - при первой итерации, например - а как (alert[i]).

Comments

[Vladimir]

ну во-первых не setAttribute. Вам же потом кликать надо, когда завершиться добавление всех в body?

[MamaLuyba]

Vladimir, через p.onclick то же самое происходит. кликать надо.

Answer 1

[MamaLuyba]

В общем, решил задачу сам.
Нужно при создании элемента назначить одному из атрибутов элемента значение i, и по нажатию вызывать this.attribute:

var days = ['mon', 'thu', 'wen']
var nums = ['12', '24', '30']

for (var i = 0; i < days.length; i++) {
  var p = document.createElement('p');
  p.alt = i;
  p.innerText = days[i];
  p.onclick = function() {alert(nums[this.alt])};
  document.getElementById("div1").appendChild(p);
}

Answer 2

[Радослав Сигачев]

создайте отдельную функцию-обработчик и при создании вешайте её на каждый элемент передавая ей нужный порядковый номер параграфа. Или при создании добавляйте специальный атрибут (типа data-someparam="'+i+'") и при клике что бы скрипт считывал его

Comments

[MamaLuyba]

а можете пример показать? куда функцию-обработчик вставить и что она должна делать?
я с программированием не связан, поэтому заранее извиняюсь, если задаю глупые вопросы.