www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] get CSS border to change onFocus?

  1. #1
    Join Date
    Jun 2012
    Location
    FL, USA
    Posts
    48

    resolved [RESOLVED] get CSS border to change onFocus?

    I've got a pretty simple script here... but the border property isn't changing for my elements onFocus...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Using JS to change CSS</title>
    <style type="text/css">
    input {border: 2px solid black;}
    </style>
    </head>
    
    <body>
    <form>
    <input type="text" id="1" />
    <input type="text" id="2" />
    <input type="text" id="3" />
    <input type="text" id="4" />
    <input type="text" id="5" />
    <input type="text" id="6" />
    <input type="submit" />
    </form>
    
    </body>
    <script language="javascript" type="text/javascript">
    
    document.getElementById('1').onFocus=thefunc('foc', 1); // for some reason the function is not fired when i click on the inputs...
    document.getElementById('2').onFocus=thefunc('foc', 2);
    document.getElementById('3').onFocus=thefunc('foc', 3);
    document.getElementById('4').onFocus=thefunc('foc', 4);
    document.getElementById('5').onFocus=thefunc('foc', 5);
    document.getElementById('6').onFocus=thefunc('foc', 6);
    
    document.getElementById('1').onBlur=thefunc('blur', 1); // and still  not fired when i click out of them
    document.getElementById('2').onBlur=thefunc('blur', 2);
    document.getElementById('3').onBlur=thefunc('blur', 3);
    document.getElementById('4').onBlur=thefunc('blur', 4);
    document.getElementById('5').onBlur=thefunc('blur', 5);
    document.getElementById('6').onBlur=thefunc('blur', 6);
    
    function thefunc(it, n)
    {
    	console.log('function fired');
    	if (it == "foc") {document.getElementById(n).style.border="3px solid red";}
    	else if (it == "blur") {document.getElementById(n).style.border="2px solid black";}
    }
    
    
    </script>
    </html>
    Last edited by captainscall; 07-24-2012 at 01:11 PM.

  2. #2
    Join Date
    Jun 2012
    Location
    FL, USA
    Posts
    48
    Fixed it. I still don't understand why the previous code didn't work though.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Using JS to change CSS</title>
    <style type="text/css">
    input {border: 2px solid black;}
    </style>
    </head>
    
    <body>
    <form>
    <input type="text" id="1" onfocus="thefunc('foc', 1);" onblur="thefunc('blur', 1);" />
    <input type="text" id="2" onfocus="thefunc('foc', 2);" onblur="thefunc('blur', 2);"/>
    <input type="text" id="3" onfocus="thefunc('foc', 3);" onblur="thefunc('blur', 3);"/>
    <input type="text" id="4" onfocus="thefunc('foc', 4);" onblur="thefunc('blur', 4);"/>
    <input type="text" id="5" onfocus="thefunc('foc', 5);" onblur="thefunc('blur', 5);"/>
    <input type="text" id="6" onfocus="thefunc('foc', 6);" onblur="thefunc('blur', 6);"/>
    <input type="submit" />
    </form>
    
    <script language="javascript" type="text/javascript">
    
    
    function thefunc(it, n)
    {
    	console.log('function fired');
    	if (it == "foc") {document.getElementById(n).style.border="3px solid red";}
    	else if (it == "blur") {document.getElementById(n).style.border="2px solid black";}
    }
    
    
    </script>
    
    </body>
    
    </html>

  3. #3
    Join Date
    Jul 2012
    Location
    Stockport, Manchester, United Kingdom
    Posts
    11
    why not just do it in css

    Code:
    #1:focus, #2:focus, #3:focus, #4:focus {
    border-color: #000;
    border-width: qpx;
    }
    if that didnt work just do :hover

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles