Ajax controls and security

Ok so here is the deal, I am an app programmer and not the traditional Web-developer, however, I am trying to increase my abilities in the web world. I am right now, however, running into a slight delima….

I have created a “control” essentially it is another HTML file that holds the code for a login control. This control is then added through the XMLHttpRequest object to my page, however, when the onClick event is fired I get a object not defined error message and when I try to debug the JS it crashes my IDE with some extreme brutality.

Code from main page

[CODE] function LoadLogin()
{
var MainDisplayElement = document.getElementById(“MainDisplayArea”);
MainDisplayElement.innerHTML = test();
}
function test()
{
var test = startSimpleGetRequest(‘Public/Controls/LoginControl.htm’);
return test;
}[/CODE]

Here is the code from the control

[CODE]function btnLogIn_Click()
{
var UserNameElement = document.getElementById(“UserNameText”);
var PasswordElement = document.getElementById(“PasswordText”);
alert(UserNameElement + PasswordElement.value);
}[/CODE]

Any Clue? Any better way to debug?

****UPDATE*****

I guess the problem is I have to load the JS from the main file and not the control, weird can anyone explain or is there a way I can load the code from the control?

Also in #JavaScript _↴