Обычное решение:
var components = {};
function func(inputData) {
function click(ev){ //вынесем функцию отдельно, дабы не создавать новую на каждый элемент
ddd[this.id].text = "hello";
}
for (var i=0; i<5; i++) {
var data = inputData["d"+i]; //component = components[i+""] - бессмыслено ибо == undefined
components[i] = document.createElement("div"); //ключи всегда приводятся к строке, i+"" - не имеет смысла
components[i].appendChild( document.createTextNode(data.text) ); //.innerText - не кроссбраузерно, в ff алалог .textContent
components[i].id = 'd' + i; //проще всего хранить нужную для связи инфу в атрибутах
components[i].onclick = click;
}
}
var ddd = {
d0: {text: "0"},
d1: {text: "1"},
d2: {text: "2"},
d3: {text: "3"},
d4: {text: "4"}
}
func(ddd);
Но если таки не хочется использовать атрибуты, и не волнует создание множества копий функций, то решение "проблемы" - классический вариант
замыкания:
var components = {};
function func(inputData) {
for (var i=0; i<5; i++) {
var data = inputData["d"+i]; //component = components[i+""] - бессмыслено ибо == undefined
components[i] = document.createElement("div"); //ключи всегда приводятся к строке, i+"" - не имеет смысла
components[i].appendChild( document.createTextNode(data.text) ); //.innerText - не кроссбраузерно, в ff алалог .textContent
components[i].onclick = function(innerData){
return function(){
innerData.text = "hello";
}
}(data) //создаём и тут же вызываем функцию, передавая в неё нужный объект(это работает по той же причине по которой не работает ваш пример: функция "замыкает" на себя все переменные, а не их значения на момент создания)
}
}
var ddd = {
d0: {text: "0"},
d1: {text: "1"},
d2: {text: "2"},
d3: {text: "3"},
d4: {text: "4"}
}
func(ddd);