Построение сложной структуры объекта.
 

Привет!
Я С++ прогер, сейчас изучаю web программирование.
Нужно построить довольно сложную (для меня) структуру объектов. Суть в том, что есть объект, который хранит в себе еще несколько, эти еще и т.д. На странице в динамическом режиме создаются элементы, у каждого элемента onclick должен изменять содержимое заданного объекта.
Небольшой пример:

var components = {};

function func(inputData) {
		
	for (var i=0; i<5; i++) {
		var component = components[i+""],
			data = inputData["d"+i];
			
		components[i+""] = document.createElement("div");
		components[i+""].innerText = data.text;
		components[i+""].onclick = function() {
			data.text = "hello";
			// вот эта часть не правильно работает (да и не должна вроде бы). Я не знаю, как правильно здесь записать.
			// Если сделать вывод в консоль, то при клике в data находится последний элемент (№4)
			// Нужно сделать так, чтобы при клике в data хранился указатель на нужный объект.
		}
	}
	
}

var ddd = {
	d0: {text: "0"},
	d1: {text: "1"},
	d2: {text: "2"},
	d3: {text: "3"},
	d4: {text: "4"}
}

func(ddd);

Создается множество div'ов, при клике они должны изменять переменную text в нужном объекте. Основная проблема в том, что я не знаю, как правильно в обработчике onclick указать объект, с которым нужно работать.
PS: реальная структура (можно сказать, дерево) объекта ddd гораздо сложней.
Спасибо!

Обычное решение:

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);

Второй вариант - то, что надо!
Огромное СПАСИБО!!!