Firefox problem

**Garpie** · 06-30-2006, 06:27 PM

Everything works on IE, on FF the input-field to show the colors (RBG) doesn't work, don't know what to do so it also works on firefox.

Here's my script:

HTML 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>Kleurentest</title>
<script language="javascript" type="text/javascript">
function color() {
var naam = document.kleuren.aa.value + document.kleuren.ab.value + document.kleuren.ac.value;
document.kleuren.kleurteksta.value = "#"+naam;
document.kleuren.kleura.style.backgroundColor=(""+ naam +"");
}
</script>
</head>
<body>
  <form name="kleuren">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" id="tabel">
      <tr>
        <td colspan="5" align="center">Choose Your Colors</td>
      </tr>
      <tr>
        <td width="20%" align="center">Red:</td>
        <td width="20%" align="center">Green:</td>
        <td width="20%" align="center">Blue:</td>
        <td width="20%" align="center">RGB</td>
        <td width="20%" align="center">HEX</td>
      </tr>
      <tr>
        <td width="20%" align="center"><select style="background-color:#000000; color:#FFFFFF;" name="aa" onchange="color()">
          <option style="background-color:#000000;" value="00">00</option>
          <option style="background-color:#330000;" value="33">33</option>
          <option style="background-color:#660000;" value="66">66</option>
          <option style="background-color:#990000;" value="99">99</option>
          <option style="background-color:#CC0000;" value="CC">CC</option>
          <option style="background-color:#FF0000;" value="FF">FF</option>
        </select></td>
        <td width="20%" align="center"><select style="background-color:#000000; color:#FFFFFF;" name="ab" onchange="color()">
          <option style="background-color:#000000;" value="00">00</option>
          <option style="background-color:#003300;" value="33">33</option>
          <option style="background-color:#006600;" value="66">66</option>
          <option style="background-color:#009900;" value="99">99</option>
          <option style="background-color:#00CC00;" value="CC">CC</option>
          <option style="background-color:#00FF00;" value="FF">FF</option>
        </select></td>
        <td width="20%" align="center"><select style="background-color:#000000; color:#FFFFFF;" name="ac" onchange="color()">
          <option style="background-color:#000000;" value="00">00</option>
          <option style="background-color:#000033;" value="33">33</option>
          <option style="background-color:#000066;" value="66">66</option>
          <option style="background-color:#000099;" value="99">99</option>
          <option style="background-color:#0000CC;" value="CC">CC</option>
          <option style="background-color:#0000FF;" value="FF">FF</option>
        </select></td>
        <td width="20%" align="center"><input style="background-color:#000000;" name="kleura" size="10" type="text" id="kleura" readonly="readonly" /></td>
        <td width="20%" align="center"><input name="kleurteksta" size="10" type="text" id="kleurteksta" readonly="readonly" value="#000000" /></td>
      </tr>
      <tr>
        <td colspan="5">&nbsp;</td>
      </tr>
      
    <tr>
      <td width="20%" align="center"><input name="border" type="button" id="border" value="Set Border" onclick="document.kleuren.kleur1.value=document.kleuren.kleurteksta.value" /></td>
      <td width="20%" align="center"><input name="title" type="button" id="title" value="Set Title" onclick="document.kleuren.kleur2.value=document.kleuren.kleurteksta.value" /></td>
      <td width="20%" align="center"><input name="background" type="button" id="background" value="Set Background" onclick="document.kleuren.kleur3.value=document.kleuren.kleurteksta.value" /></td>
      <td width="20%" align="center"><input name="text" type="button" id="text" value="Set Text" onclick="document.kleuren.kleur4.value=document.kleuren.kleurteksta.value" /></td>
      <td width="20%" align="center"><input name="url" type="button" id="url" value="Set URL" onclick="document.kleuren.kleur5.value=document.kleuren.kleurteksta.value" /></td>
    </tr>
    <tr>
      <td width="20%" align="center"><input name="kleur1" type="text" id="kleur1" /></td>
      <td width="20%" align="center"><input name="kleur2" type="text" id="kleur2" /></td>
      <td width="20%" align="center"><input name="kleur3" type="text" id="kleur3" /></td>
      <td width="20%" align="center"><input name="kleur4" type="text" id="kleur4" /></td>
      <td width="20%" align="center"><input name="kleur5" type="text" id="kleur5" /></td>
    </tr>
  </table>
</form>
</body>
</html>

Hope someone could help me

PS: There are some dutch words in the document because I'm dutch.

[Watch Example]

**jscheuer1** · 07-01-2006, 06:24 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=iso-8859-1" />
<title>Kleurentest</title>
<script language="javascript" type="text/javascript">
function color(el) {
el.style.backgroundColor=el.options[el.selectedIndex].style.backgroundColor;
var naam = document.kleuren.aa.value + document.kleuren.ab.value + document.kleuren.ac.value;
document.kleuren.kleurteksta.value = "#"+naam;
document.kleuren.kleura.style.backgroundColor='#'+ naam;
}
</script>
</head>
<body>
  <form name="kleuren">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" id="tabel">
      <tr>
        <td colspan="5" align="center">Choose Your Colors</td>
      </tr>
      <tr>
        <td width="20%" align="center">Red:</td>
        <td width="20%" align="center">Green:</td>
        <td width="20%" align="center">Blue:</td>
        <td width="20%" align="center">RGB</td>
        <td width="20%" align="center">HEX</td>
      </tr>
      <tr>
        <td width="20%" align="center"><select style="background-color:#000000; color:#FFFFFF;" name="aa" onchange="color(this)">
          <option style="background-color:#000000;" value="00">00</option>
          <option style="background-color:#330000;" value="33">33</option>
          <option style="background-color:#660000;" value="66">66</option>
          <option style="background-color:#990000;" value="99">99</option>
          <option style="background-color:#CC0000;" value="CC">CC</option>
          <option style="background-color:#FF0000;" value="FF">FF</option>
        </select></td>
        <td width="20%" align="center"><select style="background-color:#000000; color:#FFFFFF;" name="ab" onchange="color(this)">
          <option style="background-color:#000000;" value="00">00</option>
          <option style="background-color:#003300;" value="33">33</option>
          <option style="background-color:#006600;" value="66">66</option>
          <option style="background-color:#009900;" value="99">99</option>
          <option style="background-color:#00CC00;" value="CC">CC</option>
          <option style="background-color:#00FF00;" value="FF">FF</option>
        </select></td>
        <td width="20%" align="center"><select style="background-color:#000000; color:#FFFFFF;" name="ac" onchange="color(this)">
          <option style="background-color:#000000;" value="00">00</option>
          <option style="background-color:#000033;" value="33">33</option>
          <option style="background-color:#000066;" value="66">66</option>
          <option style="background-color:#000099;" value="99">99</option>
          <option style="background-color:#0000CC;" value="CC">CC</option>
          <option style="background-color:#0000FF;" value="FF">FF</option>
        </select></td>
        <td width="20%" align="center"><input style="background-color:#000000;" name="kleura" size="10" type="text" id="kleura" readonly="readonly" /></td>
        <td width="20%" align="center"><input name="kleurteksta" size="10" type="text" id="kleurteksta" readonly="readonly" value="#000000" /></td>
      </tr>
      <tr>
        <td colspan="5">&nbsp;</td>
      </tr>
      
    <tr>
      <td width="20%" align="center"><input name="border" type="button" id="border" value="Set Border" onclick="document.kleuren.kleur1.value=document.kleuren.kleurteksta.value" /></td>
      <td width="20%" align="center"><input name="title" type="button" id="title" value="Set Title" onclick="document.kleuren.kleur2.value=document.kleuren.kleurteksta.value" /></td>
      <td width="20%" align="center"><input name="background" type="button" id="background" value="Set Background" onclick="document.kleuren.kleur3.value=document.kleuren.kleurteksta.value" /></td>
      <td width="20%" align="center"><input name="text" type="button" id="text" value="Set Text" onclick="document.kleuren.kleur4.value=document.kleuren.kleurteksta.value" /></td>
      <td width="20%" align="center"><input name="url" type="button" id="url" value="Set URL" onclick="document.kleuren.kleur5.value=document.kleuren.kleurteksta.value" /></td>
    </tr>
    <tr>
      <td width="20%" align="center"><input name="kleur1" type="text" id="kleur1" /></td>
      <td width="20%" align="center"><input name="kleur2" type="text" id="kleur2" /></td>
      <td width="20%" align="center"><input name="kleur3" type="text" id="kleur3" /></td>
      <td width="20%" align="center"><input name="kleur4" type="text" id="kleur4" /></td>
      <td width="20%" align="center"><input name="kleur5" type="text" id="kleur5" /></td>
    </tr>
  </table>
</form>
</body>
</html>

**Garpie** · 07-03-2006, 01:08 AM

Thank You Very Much

Thread: Firefox problem

Thread Tools

Search Thread

Firefox problem

Bookmarks

Bookmarks

Posting Permissions