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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2007
    Location
    California, United States
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    element.className returning null...

    I am having trouble with the following code:
    Code:
    function set_registration_input_event() {
    	var inputs = document.getElementsByTagName("input");
    	for (i=0;i<=inputs.length;i++) {
    		if (inputs[i].className == "registration") {
    			inputs[i].onclick = function () {inputs[i].style.border = "#6fad00 solid 1px"};
    			inputs[i].onblur = function () {inputs[i].style.border = "#6a909e solid 1px"};		
    		}
    	}
    }
    Error I recieve:
    "'className' is null or not an object"

    I've tested this on Avant Browser 11 build 43, using the IE 7.0.5730.11 engine.

    What I am trying to do is set the onclick and onblur events to change the color of the input field borders for any input tag with "registration" as the class name.

    If I'll put somthing like "alert(inputs[i].className)", it works just fine.

    An example site can be found on my personal test server:
    http://67.182.34.47/mihopa/login/register/
    Last edited by frosty1433; 01-10-2007 at 12:10 PM. Reason: more information included

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Try to change
    Code:
    i<=inputs.length
    to
    Code:
    i<inputs.length

  • #3
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is not the error I receive. But this code will do worlds better and not leave IE memory leaks.

    Code:
    function set_registration_input_event() {
    	var inputs = document.getElementsByTagName("input");
    	for (i=0;i<inputs.length;i++) {
    		if (inputs[i].className == "registration") {
    			inputs[i].onclick = function () {this.style.border = "#6fad00 solid 1px"};
    			inputs[i].onblur = function () {this.style.border = "#6a909e solid 1px"};		
    		}
    	}
    }
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #4
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by frosty1433 View Post
    I am having trouble with the following code:
    Code:
    	for (i=0;i<=inputs.length;i++)
    Always use the var keyword. If i can equal length, it will index out of bounds.

    Code:
    inputs[i].onclick = function () {inputs[i].style.border = "#6fad00 solid 1px"};
    			inputs[i].onblur = function () {inputs[i].style.border = "#6a909e solid 1px"};
    The value of i will be undefined/meaningless when that function is called. Should be:
    Code:
    inputs[i].onclick = function () {this.style.border = "#6fad00 solid 1px"};

  • #5
    New Coder
    Join Date
    Jan 2007
    Location
    California, United States
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot for the help. Everything is working now.


  •  

    Posting Permissions

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