Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post

    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:
    Code:
    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:
    Code:
    	<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>

  • #2
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    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?
    Code:
    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";
    }

  • Users who have thanked Dean440 for this post:

    martynball (07-17-2010)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    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.

    Code:
    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");
    	}
    }

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    You can't bind a function as an event listener AND define the arguments to that function. You're trying to do this with:
    Code:
    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.
    Code:
    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:

    Code:
    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:

    Code:
    addEvent(document.getElementById('username'), "click", my_func());
    It would alert "add" instead of registering a function as an event handler.

    Make sense?

  • Users who have thanked Beagle for this post:

    martynball (07-18-2010)

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by Beagle View Post
    Make sense?
    Or just wrap that function call in an anonymous function and you've got your function object.

  • #6
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    Never mind, fixed.
    Last edited by martynball; 07-18-2010 at 03:35 PM.

  • #7
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by Dean440 View Post
    Or just wrap that function call in an anonymous function and you've got your function object.
    Which is exactly what this is:
    Code:
    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.


  •  

    Posting Permissions

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