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

Code:

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

Yammaski.

**vwphillips** · 04-06-2012, 09:47 AM

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=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 !

Thread: script cross browser

Thread Tools

Search Thread

script cross browser

Bookmarks

Bookmarks

Posting Permissions