-
 [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 12:11 PM.
-
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>
-
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
Forum Rules
|
|
Reply With Quote
Bookmarks