Save link of dynamically created anchor on click

JavaScript
1

Hello, I am trying to save a dynamically created anchor’s id onclick, but I am having a lot of trouble.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
</style>
</head>

<body onload="initAll();">
<div id="test"></div>

<script type="text/javascript">
var xhr = false;			//global xhr variable
var allRequestIds = new Array();
var allRequestDates = new Array();
var allRequestNames = new Array();
var allRequestBriefs = new Array();
var allListLinks = new Array();
var allListItems = new Array();
var linkId;       //global variable for clicked link's id; set to be the same as xml data's id; used to pull more data in next page


function initAll(){
	if (window.XMLHttpRequest){		//initialize xmlhttprequest into xhr variable
	xhr = new XMLHttpRequest();
	}
	else{}//ie stuff goes here
	xhr.open("GET","xml/request.xml",true);		//open connection
	xhr.onreadystatechange=createLinks;				//onreadystatechange call createLinks()
	xhr.send(null);	
}

function createLinks(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			if(xhr.responseXML){
				var allRequests=xhr.responseXML.getElementsByTagName("request");		//save all requests into array
				var newList=document.createElement("ol");                               //create a new ordered list
				for(i=0;i<allRequests.length;i++){                        //arrays of each tag, and an array of links
					allRequestIds[i]=allRequests[i].getElementsByTagName("requestId")[0].firstChild.nodeValue;
					allRequestDates[i]=allRequests[i].getElementsByTagName("date")[0].firstChild.nodeValue;
					allRequestNames[i]=allRequests[i].getElementsByTagName("name")[0].firstChild.nodeValue;
					allRequestBriefs[i]=allRequests[i].getElementsByTagName("brief")[0].firstChild.nodeValue;
					allListLinks[i]=document.createElement("a");            //create an array of links
					allListLinks[i].appendChild(document.createTextNode(""+allRequestDates[i]+" "+allRequestNames[i]+" "+allRequestBriefs[i]+""));    //i don't know how to add a new line within createtextnode!!! wtf?! i wanted to add a <br />
					allListLinks[i].setAttribute("href","somepage.html");
					allListLinks[i].setAttribute("class","dynamicLink");		
					allListLinks[i].setAttribute("onclick","pullDetailed();");
					allListItems[i]=document.createElement("li");             //create an array of list items
					allListItems[i].appendChild(allListLinks[i]);  //append each anchor into each list item
					newList.appendChild(allListItems[i]);          //append all list items into ordered list
				}
				document.getElementById("test").appendChild(newList);      //append list into test paragraph
				
			}
		}
	}
}

function pullDetailed(){
	alert("function pullDetailed called!");	//this is just testing to see if this function has been called on anchor click
	linkId=this.innerHTML.;	//this doesn't work
	alert(linkId);
}
</script>
</body>
</html>

does anybody have an ideas? thank you.

2

Here’s the problem:

allListLinks[i].setAttribute("onclick","pullDetailed();");

Tha assigns the following function to the onclick event:

function () {
    pullDetailed();
}

The this keyword exists within the function, but when an other function is called, such as pullDetailed, the this keyword instead refers to the window instead.

What should work is to not use inline event assignments, but to use the traditional event assignment instead:


allListLinks[i].onclick = pullDetailed;

That will assign the following function to the onclick event:


function pullDetailed() {
    ...
}
3

YOU ARE A GENIUS!!! it worked!!!

and I learned something about methods inputting attributes. so it does it through an anonymous function(){}…thank you so much! I need to study more methods/properties/DOM.

4

by the way…what is the difference between:

var blah = functionCall;
and
var blah = functionCall();

because sometimes one works while the other doesn’t…and vice versa