Log in

View Full Version : script cross browser


Yammaski
04-06-2012, 06:18 AM
This script works in IE9, FF en Chrome (latest versions).
In IE before IE9 (compatibility-modus) it only works when changing 'class' into 'className'.
Is it possible to let the script work for all browsers ?

The purpose :
when selecting the upper radiobutton ... "upper" must be green & under must be red and viceversa


function no_yes()
{
if (document.getElementById('Eigentekst').checked)
{
document.getElementById('bovenste').setAttribute('class','textfield_Boven');
document.getElementById('onderste').setAttribute('class','textfield_Onder');
}
else
{
document.getElementById('onderste').setAttribute('class','textfield_Boven');
document.getElementById('bovenste').setAttribute('class','textfield_Onder');
}
}

TESTPAGE (http://www.stickers.be/X_Tests/No_Yes_light/No_Yes_light_test.asp)


Yammaski.
vwphillips
04-06-2012, 09:47 AM
<!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=utf-8" />
<title>No_Yes_light_test</title>
<script type="text/javascript">
<!--
function noyes(ud){
document.getElementById('bovenste').className=ud?'textfield_Boven':'textfield_Onder';
document.getElementById('onderste').className=ud?'textfield_Onder':'textfield_Boven';
}
//-->
</script>

<style type="text/css">
<!--
.textfield_Boven_Onder {
color: #333;
border: 1px solid #666;
padding-top: 3px;
text-align: center;
}
.textfield_Boven {
color: #333;
border: 1px solid #666;
padding-top: 3px;
text-align: center;
background-color: #8BC53F;
}
.textfield_Onder {
color: #333;
border: 1px solid #666;
padding-top: 3px;
text-align: center;
background-color: #F77B00;
}
-->
</style>
</head>

<body>
<form action="" method="post">
<table width="750px" border="1" cellspacing="0" cellpadding="10">
<tr>
<td><input name="Eigentekst" type="radio" id="Eigentekst" onclick="noyes(true)" value="1" title="kies bovenste" /></td>
<td><input name="bovenste" type="text" class="textfield_Boven_Onder" id="bovenste" value="UPPER" size="13" readonly="true" /></td>
</tr>
<tr>
<td><input name="Eigentekst" type="radio" id="Eigentekst" onclick="noyes(false)" value="2" title="kies onderste" /></td>
<td><input name="onderste" type="text" class="textfield_Boven_Onder" id="onderste" value="UNDER" size="13" readonly="true" /></td>
</tr>
</table>
</form>
</div><!-- einde div EigenTekst_Opties -->

</body>
</html>
Yammaski
04-06-2012, 10:09 AM
Thanks a lot vwphillips ! :)