AJAX syntax basics

programming web dev
1

This is my HTML


<input type="text" size="30" maxlength="30" name="username" id="registerUsername" onkeyup="nameAvailable(this.value, 'availability')" />

This is a portion of my imported javascript file. I’ll spare you reading too much by cutting out the typical setup code in nameAvailable. This code is not working for me.


function nameAvailable(username, infoBox)
{
   // ... xmlHttp creation here ...
   xmlHttp.onreadystatechange = nameAvailableReady(infoBox);
   // ... send request here ...
} 

function nameAvailableReady(infoBox) 
{	
	if ((xmlHttp.readyState == 4) || (xmlHttp.readyState == "complete"))
		document.getElementById(infoBox).innerHTML = xmlHttp.responseText;
}

Why does it only work if I hardcode the place the response text is supposed to be inserted? This code will work as I want it to, but it is inflexible because of the hardcoding.


function nameAvailable(username, infoBox)
{
   // ... xmlHttp creation here ...
   xmlHttp.onreadystatechange = nameAvailableReady;
   // ... send request here ...
} 

function nameAvailableReady(infoBox) 
{	
	if ((xmlHttp.readyState == 4) || (xmlHttp.readyState == "complete"))
		document.getElementById("availability").innerHTML = xmlHttp.responseText;
}