Adding onclick event to element BEFORE appending to the DOM

Hi there,

I never learned javascript before I got into jQuery, so I’ve decided to use pure js for a little side-project to get my js chops up.

I’ve run into a problem almost instantly:

<html lang="en-GB">
<meta charset="utf8">

<div id="span-holder"></div>

var elem = document.createElement('span');
elem.className = "newSpan";
elem.innerHTML = "My shiny new span element";
elem.onclick = function(){ alert('Hi!'); };

var spanHolder = document.getElementById('span-holder');



I was hoping that the span would have a click event when it was added to the DOM. Alas, it does not. Do I really have to add the click event AFTER the element has been added to the DOM?

If so, what are the pros/cons of doing this instead:

var spanHolder = document.getElementById('span-holder');

spanHolder.innerHTML = '<span class="newSpan" onclick="alert(\\'Hi\\')">My shiny new span element</span>';

Many thanks,

It has. I don’t think you have scripting enabled.

Your right.

The post was actually a simplification of an issue that I’m having… so obviously they way I’m creating and appending the span element isn’t the issue.

Here’s my actual code for this project so far:

	<meta charset="utf8">
	#note-holder, #note-holder input[type=text]{font-family:monospace;font-size:65px;line-height:1.5em;letter-spacing:-1px;}
	#note-holder input[type=text]{width:280px;margin:0;height:90px;line-height:1.2px;padding-top:0;padding-bottom:0;}
	<label for="bars">Number of bars: </label>
	<input type="text" id="bars" value="4" />
	<input type="submit" id="go" value="Go" onclick="start()" />
	<div id="note-holder"></div>

var newNotes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'],
	chords = ['maj', 'm', '7', 'maj7', 'm7', 'add9', 'sus2', 'sus4'],
	noteHolder = document.getElementById("note-holder"),
	barsPerLine = 4,
	first = true,
	barsDone = 0;

function generateChord(){
	var note = notes.splice(Math.round(Math.random() * (notes.length-1)), 1),
	chord = note + chords[Math.round(Math.random()*5)];
	var elem = document.createElement('span');
	elem.className = "chord";

        //onclick added here
	elem.onclick = function(){
		console.log("clicked " + chord);

        //span element(s) append to the DOM fine...
		noteHolder.innerHTML += '<br>';
		first = true;
		notes = newNotes.slice();
	if(barsDone < numBars) generateChord();

function start(){
	numBars = Number(document.getElementById("bars").value),
	noteHolder.innerHTML = "",
	notes = newNotes.slice(),
	barsDone = 0,
	first = true;

So I’m creating random chord spans and adding them to the DOM. I want to add a click event so I can start to incorporate user interaction to the application. But the click events are not firing…

That line is overwriting everything added to the div. Append a generated ‘br’ element instead.