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 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Changing all form style on a page

    Hi, I am trying to change all the styles of input boxes and buttons on my site using javascript.

    I already have onmouseover and onmouseout events, which I now want to replace.

    I am now creating a function which does it automatically but i'm having trouble with it. Here is my script:

    function buttonStyle() {
    for (var i=0; i < document.forms.length; i++) {
    for(var a=0; a < document.forms[i].elements.length; a++) {
    var thisElement = document.forms[i].elements[a];
    alert(thisElement.type);
    if ((thisElement.type == 'text') || (thisElement.type == 'submit') || (thisElement.type == 'reset') || (thisElement.type == 'button')) {
    thisElement.onmouseover = 'this.style.borderColor = \'#FFCC00\'';
    thisElement.onmouseout = 'this.style.borderColor = \'#000000\'';
    }
    }
    }
    }


    It is having some effect because the onmouseover/out events that already exist hardcoded into the html are not working when it is being run.

    Could somebody please tell me what is wrong?

    Thanks in advance,
    Michael

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You might mean something like this instead:
    Code:
    <script type="text/javascript">
    function buttonStyle() {
    var inps=document.getElementsByTagName('input')
    for(var i=0;i<inps.length;i++)
    	{
    	if((inps[i].type=='text')||(inps[i].type=='submit')||(inps[i].type=='reset'))
    		{
    		inps[i].onmouseover=function()
    			{
    			this.style.borderColor='#fc0';
    			}
    		inps[i].onmouseout=function()
    			{
    			this.style.borderColor='#000';
    			}
    		}
    	}
    }
    </script>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    micmania1 (06-20-2008)


  •  

    Posting Permissions

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