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
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Styling of DIV

    Hi guys,

    Having a little trouble with using Javascript to style a div "on the fly". I'm currently creating a sign up membership form in which I'd like the input text box's holding DIV to change colour depending on if the text box has been filled in. For example, I have written some Javascript code that will change the surrounding div to a yellow colour when the text box is 'onfocus', I have then made the JS check to see if the text box has been filled when 'onblur'. It then changes to red if nothing has been typed in the box or back to the default colour if something has. Happy! But...

    I'd like to use this piece of JS code on all of the input text fields in my form which would mean I'd have to re-type and adapt the code (adding IDs name1, name2, name3 etc) to the various different div IDs. Is there a way to use the 'this.style' trick to use the same code on all the divs without having to re-type (and make my JS file unnecessarily big)?

    Many thanks


    The JavaScript Code:
    Code:
    function changeBackground()
    {
    	document.getElementById("name1").style.background="#FFFFe0";	
    }
    
    function checkBackground()
    {
    	var x=document.forms["applicationForm"]["firstNameInput"].value;
    		
    		if (x=="") 
    			{    
    				document.getElementById("name1").style.background="#ffaaaa";
    							
    			}
    				
    		else 
    			{    
    				document.getElementById("name1").style.background="#e6e8e9";	
    			}		
    		
    }
    HTML Code:
    Code:
    <form id="applicationForm" action="appForm.php" method="post">
                        
                        
                        
                   <div id="name1"  class="inputHolder">
        
                           <div class="formTitle">
                              <p>First Name</p><p style="color:red;">&nbsp;*</p>
                                                     
                            </div><!--formTitle-->
                                    
                            <div class="formInput">
                                <input type="text" name="firstNameInput" value="" onfocus="changeBackground(this)" onblur="checkBackground(this)">
                                                     
                            </div><!--formInput-->
                           
                             </div><!--inputHolder-->
    
    
    
                    <div id="name2"  class="inputHolder">
        
                           <div class="formTitle">
                              <p>Surname</p><p style="color:red;">&nbsp;*</p>
                                                     
                            </div><!--formTitle-->
                                    
                            <div class="formInput">
                                <input type="text" name="surNameInput" value="" onfocus="changeBackground(this)" onblur="checkBackground(this)">
                                                     
                            </div><!--formInput-->
                           
                             </div><!--inputHolder-->
    
                             </form>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    According to the method of behavioral separation you should not change styles with JavaScript. Rather, you would add and remove a class, for example, and let CSS do the styling. This would also make your problem go away immediately. Also, don’t use inline styles, use classes to style it in a separate stylesheet with CSS, or use different CSS element selector combinations to get more specific (e. g. for the spans with the asterisks).

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahhh very cool. Could you give me a very short example of how to change a class using JS?

    Many thanks for your reply!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Code:
    document.getElementById("name1").className="changed";
    And then you can do:
    Code:
    .changed {background-color: #FFFFE0;}
    Note: by setting className you overwrite all classes that might have been set on the element previously. This article also has some info on the subject.

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I were to do it with

    document.getElementById("name1").className="changed";

    then I'd have to create a different function for each text box, no? Like

    Code:
    function changeBackground()
    {
    	document.getElementById("name1").style.background="#FFFFe0";	
    }
    
    function checkBackground1()
    {
    	var x=document.forms["applicationForm"]["firstNameInput"].value;
    		
    		if (x=="") 
    			{    
    				document.getElementById("name1").className="changed";
    			}
    				
    		else 
    			{    
    				document.getElementById("name1").className="changedBack";	
    			}		
    		
    }
    
    function checkBackground2()
    {
    	var x=document.forms["applicationForm"]["surNameInput"].value;
    		
    		if (x=="") 
    			{    
    				document.getElementById("name2").className="changed";
    			}
    				
    		else 
    			{    
    				document.getElementById("name2").className="changedBack";	
    			}		
    		
    }
    
    function checkBackground3()
    {
    	var x=document.forms["applicationForm"]["middleNameInput"].value;
    		
    		if (x=="") 
    			{    
    				document.getElementById("name3").className="changed";
    			}
    				
    		else 
    			{    
    				document.getElementById("name3").className="changedBack";	
    			}		
    		
    }
    
    etc etc..?


  •  

    Posting Permissions

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