SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code:
    <!DOCTYPE>
    <html lang="en-GB">
    <head>
    <meta charset="utf8">
    </head>
    
    <body>
    <div id="span-holder"></div>
    
    <script>
    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');
    
    spanHolder.appendChild(elem);
    </script>
    
    </body>
    </html>
    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:
    Code:
    var spanHolder = document.getElementById('span-holder');
    
    spanHolder.innerHTML = '<span class="newSpan" onclick="alert(\'Hi\')">My shiny new span element</span>';
    Many thanks,
    Mike

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mickyginger View Post
    I was hoping that the span would have a click event when it was added to the DOM.
    It has. I don't think you have scripting enabled.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <head>
    	<meta charset="utf8">
    	<style>
    	#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;}
    	span.chord{display:inline-block;width:280px;}
    	</style>
    </head>
    <body>
    	<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>
    
    
    <script>
    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"),
    	t,
    	barsPerLine = 4,
    	first = true,
    	notes,
    	numBars,
    	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";
    	elem.appendChild(document.createTextNode(chord));
    
            //onclick added here
    	elem.onclick = function(){
    		console.log("clicked " + chord);
    	};
    
            //span element(s) append to the DOM fine...
    	noteHolder.appendChild(elem);
    	barsDone++;
    	if(!(barsDone%barsPerLine)){
    		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;
    	generateChord();
    }
    </script>
    </body>
    </html>
    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...

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mickyginger View Post
    Code:
    noteHolder.innerHTML += '<br>';
    That line is overwriting everything added to the div. Append a generated 'br' element instead.
    Tab-indentation is a crime against humanity.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •