Javascript funktioniert nicht -> onChange Event

tholmer

Mitglied
Hi,

ich hab so eigtl. keine Ahung von Javascript, nur PHP. Da ich nun aber doch ein wenig Javascript brauch, hab ich bisschen rumprobiert.

Der Sachverhalt:
Ich will in einer Auswahlliste zwischen 3 Optionen wählen, also 0, 1 oder 2 (selectedIndex). Beim auswählen, also bei onChange, soll dann:
bei 0: nichts passieren bzw DIV mit ID E und C ausgeblendet werden
bei 1: soll ein DIV mit der ID E eingeblendet und das mit ID C ausgeblendet
bei 2: soll ein DIV mit der ID C eingeblendet und das mit ID E ausgeblendet

Also habe ich eine Funktion geschrieben:
HTML:
<script type="text/javascript">
        function toogle_type()
        {
          type = document.forms.newoptform.el_type.selectedIndex;
          abschnittE = document.getElementById("E");
          abschnittC = document.getElementById("C");
          
          if ( type == "0" )
          {
            abschnittE.style.display = "none";
            abschnittC.style.display = "none";
          }
          else if ( type == "1" )
          {
            abschnittE.style.display = "block";
            abschnittC.style.display = "none";
          }
          else
          {
            abschnittC.style.display = "block";
            abschnittE.style.display = "none";
          }
              
          return true;
        }
      </script>

Das onChange Event:
HTML:
<select name="el_type" size="1" onChange="toogle_type()">
              <option value="0">Auswahlmöglk.</option>
              <option value="1">Eingabemöglk.</option>
              <option value="2">Auswahlbox</option>
            </select>

Und die Abschnitt die aus bzw eingebldnet werden sollen:
HTML:
<div id="E">
        <tr>
          <td colspan="2" class="row1"><span class="norm">Breite des Eingabefeldes:</span></td>
          <td colspan="4" class="row1"><input type="text" name="el_width" size="5" value="0" /></td>
        </tr>
        <tr>
          <td colspan="2" class="row1"><span class="norm">maximaler Eingabewert durch Kunde:</span></td>
          <td colspan="4" class="row1"><input type="text" name="el_value_max" size="10" value="0" /></td>
        </tr>
        <tr>
          <td colspan="2" class="row1"><span class="norm">minimaler Eingabewert durch Kunde:</span></td>
          <td colspan="4" class="row1"><input type="text" name="el_value_min" size="10" value="0" /></td>
        </tr>
        <tr>
          <td colspan="2" class="row1"><span class="norm">Einheit:</span></td>
          <td colspan="4" class="row1"><input type="text" name="el_unit" size="5" /></td>
        </tr>
        <tr>
          <td colspan="2" class="row1"><span class="norm">Schrittweite:</span></td>
          <td colspan="4" class="row1"><input type="text" name="el_stepwidth" size="10" value="0" /></td>
        </tr>
        </div>
        <div id="C">
        <tr>
          <td colspan="2" class="row1"><span class="norm">wählbare Auswahlmöglichkeiten:</span></td>
          <td colspan="4" class="row1"><input type="text" name="el_units" size="30" /></td>
        </tr>
        </div>

Aber es passiert nix. Es kommt nicht mein ein Fehler beim IE oder es steht etwas in der Fehlerkonsole von Opera.

Ich habe durch document.write herausgefunden das er die Funktion aufruft und auch die If Anweisungen richtig umsetzt. Aber er blendet die DIV's nicht aus.

Kann mir jemand sagen wo der Fehler liegt? Oder weiß vielleicht noch einen eine andere leichtere Methode!?

mfg, tholmer
 
Hi!

...hm, beisst sich da was mit Deinen "tables"?!
HTML:
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function toogle_type() {
    type = document.forms.newoptform.el_type.selectedIndex;
    abschnittE = document.getElementById("E");
    abschnittC = document.getElementById("C");
 
    if ( type == "0" ) {
        abschnittE.style.display = "none";
        abschnittC.style.display = "none";
    } else if ( type == "1" ) {
        abschnittE.style.display = "block";
        abschnittC.style.display = "none";
    } else {
        abschnittC.style.display = "block";
        abschnittE.style.display = "none";
    }
    return true;
}
//--> 
</script>
 
</head>
<body>
 
<form name="newoptform">
 
<select name="el_type" size="1" onChange="toogle_type()">
    <option value="0">Auswahlmöglk.</option>
    <option value="1">Eingabemöglk.</option>
    <option value="2">Auswahlbox</option>
</select>
 
<div id="E" style="display:none;">
<table>
<tr><td colspan="2" class="row1"><span class="norm">Breite des Eingabefeldes:</span></td>
    <td colspan="4" class="row1"><input type="text" name="el_width" size="5" value="0" /></td>
</tr>
<tr><td colspan="2" class="row1"><span class="norm">maximaler Eingabewert durch Kunde:</span></td>
    <td colspan="4" class="row1"><input type="text" name="el_value_max" size="10" value="0" /></td>
</tr>
<tr><td colspan="2" class="row1"><span class="norm">minimaler Eingabewert durch Kunde:</span></td>
    <td colspan="4" class="row1"><input type="text" name="el_value_min" size="10" value="0" /></td>
</tr>
<tr><td colspan="2" class="row1"><span class="norm">Einheit:</span></td>
    <td colspan="4" class="row1"><input type="text" name="el_unit" size="5" /></td>
</tr>
<tr><td colspan="2" class="row1"><span class="norm">Schrittweite:</span></td>
    <td colspan="4" class="row1"><input type="text" name="el_stepwidth" size="10" value="0" /></td>
</tr>
</table>
</div>
 
<div id="C" style="display:none;">
<table>
<tr><td colspan="2" class="row1"><span class="norm">wählbare Auswahlmöglichkeiten:</span></td>
    <td colspan="4" class="row1"><input type="text" name="el_units" size="30" /></td>
</tr>
</table>
</div>
 
</form>
 
</body>
</html>
...funktioniert bei mir unter IE und MF... :confused:

Liebe Grüße,
Mark.
 

Neue Beiträge

Zurück