Event Listener Again

I can't seem to get the event listener to run an event when I focus on the text field with the ID username.

JavaScript:

function listener_loginForm() {
var fields = Array("username","password");
for ( j = 0; j < fields.length; j++ ) {
var objs = document.getElementById(fields[j]);
for ( var i = 0; i < objs.length; ++i ) {
var elm = objs [ i ];
elm.onblur = function() { display_text_bg(this); };
if (elm.Id = "password") {
elm.onfocus = function() { switch_field(this); };
}
}
}
}

//This function attaches events to elements.
var addEvent = function( elm, evt, fun ) {
if ( elm.addEventListener ) {
elm.addEventListener( evt, fun, false );
} else if ( elm.attachEvent ) {
elm.attachEvent( 'on' + evt, fun );
} else {
elm [ 'on' + evt ] = fun;
}
};
addEvent ( window, "load", listener_loginForm );

//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered.
function display_text_bg(obj) {
alert("remove text");
}
function switch_field(obj) {
alert("switch");
}


HTML:

<form name="login" class="login">
<label for="username">Username: </label><br />
<input type="text" name="username" id="username" />
<br /><br />
<label for="password">Password: </label><br />
<input type="text" name="password" id="password" />
<br /><br />
<label for="remember">Remember Me? </label><br />
<br />
<span class="remember">
<span class="text">Never</span>
<input type="hidden" value="never" name="rememberme" />
<ul>
<li>Never</li>
<li>24 Hours</li>
<li>1 Week</li>
<li>Always</li>
</ul>
</span>
</form>

I'm not 100% sure what you're going for here, so I just gave each input field an onblur and onfocus listener, so the color changes to reflect the field you're on.

Instead of attaching events to the elements the way you did, why not just re-use that addEvent function that you made?
function listener_loginForm() {
var fields = ["username","password"];
var objs = []; //objs should be an array.
var elm;

//This loop populates our objs array with
//HTML Input Elements:
for (var j = 0; j < fields.length; j++ ) {
objs.push( document.getElementById(fields[j]) );
}

//This loop adds an event listener to each element
//in the objs array..we re-use the addEvent function you have
for (var i = 0; i < objs.length; i++ ) {
elm = objs [i];
addEvent(elm, "blur", function() { display_text_bg(this); });
addEvent(elm, "focus", function() { switch_field(this); });
}
}

//This function attaches events to elements.
var addEvent = function( elm, evt, fun ) {
if ( elm.addEventListener ) {
elm.addEventListener( evt, fun, false );
} else if ( elm.attachEvent ) {
elm.attachEvent( 'on' + evt, fun );
} else {
elm [ 'on' + evt ] = fun;
}
};
addEvent ( window, "load", listener_loginForm );

//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered.
function display_text_bg(obj) {
obj.style["background-color"]="white";
}
function switch_field(obj) {
obj.style["background-color"]="#F0F9FF";
}

Thanks, but just realise I need to add the events separately. But the below script is making the alert("add") to show on page load.


function listener_loginForm() {
addEvent(document.getElementById('username'), "click", input_bg_text('add'));
}

//This function attaches events to elements.
var addEvent = function( elm, evt, fun ) {
if ( elm.addEventListener ) {
elm.addEventListener( evt, fun, false );
} else if ( elm.attachEvent ) {
elm.attachEvent( 'on' + evt, fun );
} else {
elm [ 'on' + evt ] = fun;
}
};

addEvent ( window, "load", listener_loginForm );

//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered.
function input_bg_text(fun) {
switch(fun) {
case "add":
alert("add");
}
}

You can't bind a function as an event listener AND define the arguments to that function. You're trying to do this with:

addEvent(document.getElementById('username'), "click", input_bg_text('add'));

You can't do this, because you are actually calling input_bg_text, so it will run. Think of it this way.

addEvent's final parameter is a function. input_bg_text('add') evaluates to null because it doesn't return anything. You are passing NULL to addEvent instead of a function. You could solve this by passing in input_bg_text, which is a function name and evaluates to a function, but you need to pass in your parameter.

So, what you need to do is pass in a function that does what you want, instead of trying to do what you want prematurely.

function input_bg_text(fun) {
switch(fun) {
case "add":
alert("add");
}
}

var my_func = function() { input_bg_text('add');};

input_bg_text('add'); // alerts "add"
my_func(); // alerts "add"


So now, you've got my_func and you can pass that around and when you call it, it does what you want. So:


addEvent(document.getElementById('username'), "click", my_func);


This registers the function that does what you want, instead of doing what you want prematurely. If instead you did:


addEvent(document.getElementById('username'), "click", my_func());

It would alert "add" instead of registering a function as an event handler.

Make sense?

Make sense?

Or just wrap that function call in an anonymous function and you've got your function object.

Never mind, fixed.

Or just wrap that function call in an anonymous function and you've got your function object.

Which is exactly what this is:
var my_func = function() { input_bg_text('add');};

I just made it more explicit for the purposes of explanation, in the hopes that the OP will come to understand the principles behind these things so he can remix them himself as he gets better.