Quiz - Event-Handler dynamisch anbinden

[Matthias Scharwies]

Servus!

ich dilettiere so vor mich hin und stoße bei der Umstrukturierung meiner unorganisierten Scripte auf immer mehr Fragen:

beispiel.html

Z.20: Ist das quiz-Object so logisch?

var quiz = new Object();
    quiz.question   = 'Was ist die Hauptstadt von Deutschland?';
    quiz.solution   = 'Berlin';
    quiz.options    = ['Berlin', 'Hamburg', 'München', 'Hannover'];

z.52: Ich würde gerne den neu erzeugten Elementen eine Klasse oder einen Event-Handler geben. Wie geht das?

	for (index = 0; index < quiz.options.length; index++) {
	    text = quiz.options[index];
		newElement = addAChild('a', text);
		//newElement.className = "foo";
	}

Ich hatte dafür das a-Element gewählt, da ich dachte, dass man es dann auch durchtabben kann. Dafür benötigt es aber wohl noch ein href="#", oder?

Wie kann ich hier eine Klickfunktionalität erreichen? Wenn ich die Variable newElement noch einmal verwende, bricht die Schleife ab.

Auch der Versuch, die Funktion an den #quiz-Container anzuhängen und dann mit Event.target das geklickte Element zu identifizieren geht so nicht:

  //...
  var element = document.getElementById('quiz');
  element.addEventListener('click',function(){clickHandler(event);});
}

function clickHandler(event) {
  var target = event.target;
  console.log(target);   
}

Um den Event mit target zu identifizieren, benötige ich doch das Event, oder? Wie kann ich das übergeben?

Vielen Dank im Voraus!

Herzliche Grüße

Matthias Scharwies