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 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    JavaScript For Loops within Events

    Hi,

    I'm kinda new to JavaScript. I have created a form that only has two text boxes and one textarea. For each box, onfocus I want the background color to change, and also onblur I want the background color to change back to it's original color. I already have the following coding that accomplishes this task:

    var namefield = document.getElementById("name");
    var emailfield = document.getElementById("email");
    var commentfield = document.getElementById("comment");
    namefield.onfocus = function(){
    namefield.style.backgroundColor = "#FAFFBD";
    };
    namefield.onblur = function(){
    namefield.style.backgroundColor="#ffffff";
    };
    emailfield.onfocus = function(){
    emailfield.style.backgroundColor = "#FAFFBD";
    };
    emailfield.onblur = function(){
    emailfield.style.backgroundColor="#ffffff";
    };
    commentfield.onfocus = function(){
    commentfield.style.backgroundColor = "#FAFFBD";
    };
    commentfield.onblur = function(){
    commentfield.style.backgroundColor="#ffffff";
    };

    However, the coding above seems kinda clunky. So, I have been wanting to loop through the form elements, but I am unable to figure out how to do this. This is the lastest coding I have tried, but it does not work:

    var test1 = document.getElementsByTagName("input");
    test1.addEventListener('focus', testFunc, false);
    function testFunc(){
    for(i=0; i<test1.length; i++){
    test1[i].style.backgroundColor = "black";
    test1[i].style.color = "green";
    }

    Any suggestions would be great. :)

    Thanks,
    Julie

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    there are a couple of problems here.

    one is that a text area's tag is textarea, so you will not get it by using document.getElementsByTagName("input");

    if you want to put the inputs and the textarea in the same collection, give them the same class name and test for that.

    the other one is the way you are adding the event listener will fail in IE. If you do want to add an event listener unobstructively in a way that will work on all browsers have a look on this page

    if these are the only blur and focus events you will ever be adding to those elements and you are the only person who will be maintaining the code, you can probably use the much simpler "obstructive" method, inside the loop:

    Code:
    <body>
    <input type="text" class="inp"/>
    <input type="text" class="inp"/>
    <textarea class="inp"></textarea>
    <script type="text/javascript">
    var test1 = document.getElementsByTagName("*");
    for(i=0; i<test1.length; i++){
    if(test1[i].className=="inp"){
    test1[i].onfocus=function(){
    this.style.backgroundColor = "#FAFFBD";
    this.style.color = "green";
    }
    test1[i].onblur=function(){
    this.style.backgroundColor = "#ffffff";
    this.style.color = "red";
    }
    	}
    }
    
    </script>
    </body>

  • Users who have thanked xelawho for this post:

    fireplace_tea (09-06-2012)

  • #3
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi Xelawho,

    Thanks for the response. I already knew about the two issues. Right now I'm trying to get the code working in Firefox (I was going to deal with the IE issue later). Also, I'm just trying to get the coding to work with the two input elements and then go from there.

    I'm trying to avoid obstructive coding. But, I will for sure give your coding a try.

    I'll let ya know how it turns out tomorrow.

    Good night.
    Julie


    Quote Originally Posted by xelawho View Post
    there are a couple of problems here.

    one is that a text area's tag is textarea, so you will not get it by using document.getElementsByTagName("input");

    if you want to put the inputs and the textarea in the same collection, give them the same class name and test for that.

    the other one is the way you are adding the event listener will fail in IE. If you do want to add an event listener unobstructively in a way that will work on all browsers have a look on this page

    if these are the only blur and focus events you will ever be adding to those elements and you are the only person who will be maintaining the code, you can probably use the much simpler "obstructive" method, inside the loop:

    Code:
    <body>
    <input type="text" class="inp"/>
    <input type="text" class="inp"/>
    <textarea class="inp"></textarea>
    <script type="text/javascript">
    var test1 = document.getElementsByTagName("*");
    for(i=0; i<test1.length; i++){
    if(test1[i].className=="inp"){
    test1[i].onfocus=function(){
    this.style.backgroundColor = "#FAFFBD";
    this.style.color = "green";
    }
    test1[i].onblur=function(){
    this.style.backgroundColor = "#ffffff";
    this.style.color = "red";
    }
    	}
    }
    
    </script>
    </body>

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,286
    Thanks
    12
    Thanked 343 Times in 339 Posts
    for modern browsers, CSS would suffice, e.g.
    PHP Code:
    input:focus {
        
    background-colorred;

    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • The Following 2 Users Say Thank You to Dormilich For This Useful Post:

    fireplace_tea (09-06-2012), xelawho (09-06-2012)

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    nice catch, Dormilich works in IE8 (let's be nice and call it a semi-modern browser), too, as long as you have a doctype...

  • #6
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks Xelawho and Dormilich.

    Xelawho, I am using your coding, it works well.

    Dormilich, thanks for the CSS3 coding. I will use it in the future. Right now, I want to use JavaScript.

    Later,
    Julie

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Quote Originally Posted by fireplace_tea View Post
    Dormilich, thanks for the CSS3 coding.
    That’s CSS 2 and has been around since 1998.

  • #8
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Really? Hahaha! You can tell I'm new. :P


    Quote Originally Posted by VIPStephan View Post
    That’s CSS 2 and has been around since 1998.

  • #9
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    This is the JavaScript coding I ended up using and it works great! My form is really short, so the coding below works great for it. This coding does two things:
    (1) it styles the two text fields and one textarea field (they have class names of "formbox").
    (2) it seperately styles the submit and reset buttons (via the else statements).

    Code:
    var formbg = document.getElementById("contactform").elements;
    for(i=0; i<formbg.length; i++){
    	if(formbg[i].className=="formbox"){
    		formbg[i].onfocus=function(){
    			this.style.backgroundColor = "#faffbd";
    		}	
    		formbg[i].onblur=function(){
    			this.style.backgroundColor = "#ffffff";
    		}
    	}else{
    		formbg[i].onmouseover = function(){
    			this.style.backgroundColor = "green";
    		}
    		formbg[i].onmouseout = function(){
    			this.style.backgroundColor = "#1e9cd7";
    		}
    	}
    }
    Here is the HTML coding:
    Code:
    <form id="contactform" method="post" action="contact_php.php">
    	<label>Name*
    	<input type="text" name="name" id="name" class="formbox" />
    	</label>
    
    	<label>Email*
    	<input type="text" name="email" id="email" class="formbox" />
    	</label>
    
    	<label>Comment* 
    	<textarea rows="6" cols="10" name="comment" id="comment" class="formbox"></textarea>
    	</label>
    
    	<input type="submit" value="Send" class="formbutton" />
    	<input type="reset" value="Reset" class="formbutton" />
    </form>
    Last edited by fireplace_tea; 09-11-2012 at 08:30 AM.


  •  

    Posting Permissions

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