onClick() problem

retta

Mitglied
Hallo,

ich hab folgendes Problem:

Ich definiere folgendes im header
HTML:
<script language="JavaScript">
function setVisibility(id, visibility) 
{
	document.getElementById(id).style.display = visibility;
}
</script>

Die funktion brauch ich um "div" felder sichtbar und unsichtbar zu machen, mit:

HTML:
<form action="templates/formularversenden2.php" method="POST">
	<select name="menu1" size="7">
   	  <option name="Hoerstation" onClick="	setVisibility('videostation', 'none');
        									setVisibility('hoerstation', 'inline');">H&ouml;rstation</option>
	  <option name="Videostation" onClick="	setVisibility('hoerstation', 'none');; 
        									setVisibility('videostation', 'inline');">Videostation</option>
    </select>

davon gibt es noch einige weitere deswegen brauch ich die funktion.

Nun hab ich das Problem das, das auch alles in Mozilla funktioniert aber leider nicht im Internet Explorer den ja leider noch sehr viele benutzen. Nun ist die frage wie kann ich das ändern, das es keine Probleme mehr mit dem IE gibt?

mfg

retta
 
Hej,

erstmal danke für die schnelle Antwort, aber...

wenn du minetest ich soll alle onClick events durck onChange tauschen, dann funktioniert das nicht da er mir dann
Fehler: Die Erlaubnis für den Aufruf der Methode Location.toString wurde verweigert
auswirft.

Wenn du das anders meintest bitte ich dich, erklär es mir kurz

retta
 
Zuletzt bearbeitet:
Warum ne extra funktion?

HTML:
<div onClick="javascript: this.style.display='none'"></div>

LG John

//Edit, ich habs mal wieder nicht gelesen.

in deinem Fall:

onChance="javascript: this.style.display='none'"
 
Zuletzt bearbeitet:
danke nochmal, aber sorry ich steh irgendwie grad derbe auf dem Schlauch.

Ich versteh immer noch nicht wo und wie du das onChange event einfügen möchtest.

Die <div> container sollen ja nur angezeigt werden wenn ein menu punkt ausgewählt wird

hier mal das komplette script

HTML:
<html>
<head>
<title>Produktplaner</title>
<script language="JavaScript">
function setVisibility(id, visibility) 
{
	document.getElementById(id).style.display = visibility;
}
</script>


</head>
<body>
<font face="Arial">
<h1 align="left">Produktplaner</h1>
<br>
<div align="left">
F&uuml;r ein Angebot, w&auml;hlen Sie bitte Ihre Anforderungen aus, trgane Ihre E-Mail Adresse ein<br>
und klicken auf "Absenden". Mit "Zur&uuml;cksetzen" k&ouml;nnen Sie Ihre Eingaben l&ouml;schen.<br>
Wir freuen uns auf Ihre Anfrage<br><br>
</div>

<table>
<tr>
<td>
<form action="templates/formularversenden2.php" method="POST">
	<select name="menu1" size="7">
   	  <option name="Hoerstation" onChange="	setVisibility('videostation', 'none');
        									setVisibility('hoerstation', 'inline');">H&ouml;rstation</option>
	  <option name="Videostation" onChange="	setVisibility('hoerstation', 'none');; 
        									setVisibility('videostation', 'inline');">Videostation</option>
    </select>
    
    <select name="menu2" size="7">
    	<option name="Stele160" onChange=" 	setVisibility('stele60', 'none');
        									setVisibility('wandaufbau', 'none');
                                            setVisibility('wandeinbau', 'none');
                                            setVisibility('stele160', 'inline');">Stele 160cm</option>
                                            
        <option name="Stele60" onChange=" 	setVisibility('stele160', 'none');
        									setVisibility('wandaufbau', 'none');
                                            setVisibility('wandeinbau', 'none');
                                            setVisibility('stele60', 'inline');">Stele 60cm</option>
                                            
    	<option name="Wandaufbau" onChange=" setVisibility('stele160', 'none');
        									setVisibility('stele60', 'none');
                                            setVisibility('stele160', 'wandeinbau');
                                            setVisibility('wandaufbau', 'inline');">Wandaufbau</option>
                                            
        <option name="Wandeinbau" onChange=" setVisibility('stele160', 'none');
        									setVisibility('stele60', 'none');
                                            setVisibility('stele160', 'wandeinbau');
                                            setVisibility('wandeinbau', 'inline');">Wandeinbau</option>
    </select>
    
    <select name="menu3" size="7">
    	<option name="aktiv" onChange=" 		setVisibility('hoerer_1', 'none');
        									setVisibility('hoerer_2', 'none');
                                            setVisibility('kopfhoerer', 'none');
                                            setVisibility('kopfhoerer_2', 'none');
                                            setVisibility('aktiv', 'inline');">Aktiv</option>
                                            
        <option name="hoerer_1" onChange=" 	setVisibility('aktiv', 'none');
        									setVisibility('hoerer_2', 'none');
                                            setVisibility('kopfhoerer', 'none');
                                            setVisibility('kopfhoerer_2', 'none');
                                            setVisibility('hoerer_1', 'inline');">1 H&ouml;rer</option>
                                            
        <option name="hoerer_2" onChange=" 	setVisibility('aktiv', 'none');
        									setVisibility('hoerer_1', 'none');
                                            setVisibility('kopfhoerer', 'none');
                                            setVisibility('kopfhoerer_2', 'none');
                                            setVisibility('hoerer_2', 'inline');">2 H&ouml;rer</option>
                                            
        <option name="Kopfhoerer" onChange=" setVisibility('hoerer_1', 'none');
        									setVisibility('hoerer_2', 'none');
                                            setVisibility('aktiv', 'none');
                                            setVisibility('kopfhoerer_2', 'none');
                                            setVisibility('kopfhoerer', 'inline');">1 Kopfh&ouml;rer</option>
                                            
        <option name="Kopfhoerer_2" onChange=" 	setVisibility('hoerer_1', 'none');
        										setVisibility('hoerer_2', 'none');
                                                setVisibility('aktiv', 'none');
                                                setVisibility('kopfhoerer', 'none');
                                                setVisibility('kopfhoerer_2', 'inline');">2 Kopfh&ouml;rer</option>
    </select>
    
    <select name="menu5" size="7">
    	<option name="startauto" onChange=" 	setVisibility('taster_1', 'none');
        									setVisibility('taster_2', 'none');
                                           	setVisibility('telefon', 'none');
                                            setVisibility('taster_6', 'none');
                                            setVisibility('extern', 'none');
                                            setVisibility('bewegung', 'none');
                                           	setVisibility('startauto', 'inline');">Start automatisch</option>
                                            
        <option name="taster_1" onChange=" 	setVisibility('startauto', 'none');
        									setVisibility('taster_2', 'none');
                                           	setVisibility('telefon', 'none');
                                            setVisibility('extern', 'none');
                                            setVisibility('taster_6', 'none');
                                            setVisibility('bewegung', 'none');
                                           	setVisibility('taster_1', 'inline');">1 Taster</option>
                                            
    	<option name="taster_2" onChange="   setVisibility('startauto', 'none');
        									setVisibility('taster_1', 'none');
                                           	setVisibility('telefon', 'none');
                                            setVisibility('extern', 'none');
                                            setVisibility('taster_6', 'none');
                                            setVisibility('bewegung', 'none');
                                           	setVisibility('taster_2', 'inline');">2 Taster</option>
                                            
        <option name="taster_6" onChange="	setVisibility('startauto', 'none');
        									setVisibility('taster_1', 'none');
                                           	setVisibility('telefon', 'none');
                                            setVisibility('extern', 'none');
                                            setVisibility('taster_2', 'none');
                                            setVisibility('bewegung', 'none');
                                           	setVisibility('taster_6', 'inline');">3-6 Taster</option>
                                            
        <option name="telefon" onChange="    setVisibility('startauto', 'none');
        									setVisibility('taster_1', 'none');
                                           	setVisibility('taster_6', 'none');
                                            setVisibility('extern', 'none');
                                            setVisibility('taster_2', 'none');
                                            setVisibility('bewegung', 'none');
                                           	setVisibility('telefon', 'inline');">12er Telefon</option>
                                            
        <option name="bewegung" onChange="   setVisibility('startauto', 'none');
        									setVisibility('taster_1', 'none');
                                           	setVisibility('telefon', 'none');
                                            setVisibility('extern', 'none');
                                            setVisibility('taster_2', 'none');
                                            setVisibility('telefon', 'none');
                                           	setVisibility('bewegung', 'inline');">Bewegungsmelder</option>
                                            
        <option name="extern" onChange="     setVisibility('startauto', 'none');
        									setVisibility('taster_1', 'none');
                                           	setVisibility('telefon', 'none');
                                            setVisibility('taster_6', 'none');
                                            setVisibility('taster_2', 'none');
                                            setVisibility('bewegung', 'none');
                                           	setVisibility('extern', 'inline');">externer Schaltkontakt</option>        
     </select>
    
    <select name="menu4" size="7">
    	<option name="nichts" onChange="		  setVisibility('klima', 'none');
        									  setVisibility('solar', 'none');
                                              setVisibility('frost', 'none');">- - - -</option>
                                              
    	<option name="Frostwaechter" onChange="setVisibility('klima', 'none');
        									  setVisibility('solar', 'none');
                                              setVisibility('frost', 'inline');">Frostw&auml;chter</option>
                                             
        <option name="Klima" onChange="		  setVisibility('frost', 'none');
        									  setVisibility('solar', 'none');
                                              setVisibility('klima', 'inline');">Klimageh&auml;use</option>
                                             
        <option name="Solar" onChange="		  setVisibility('klima', 'none');
        									  setVisibility('frost', 'none');
                                              setVisibility('solar', 'inline');">Solarbetrieb</option>
    </select>
    </td>
    <td valign="top">
    <input type="reset" value="Zur&uuml;cksetzen" name="Reset" onChange="
                                                                    setVisibility('videostation', 'none');
    																setVisibility('hoerstation', 'none');
                                                            		setVisibility('stele160', 'none');
                                                            		setVisibility('stele60', 'none');
                                                            		setVisibility('wandaufbau', 'none');
                                                            		setVisibility('wandeinbau', 'none');
                                                            		setVisibility('klima', 'none');
                                                            		setVisibility('frost', 'none');
                                                            		setVisibility('solar', 'none');
                                                    				setVisibility('hoerer_1', 'none');
                                                            		setVisibility('hoerer_2', 'none');
                                                            		setVisibility('kopfhoerer', 'none');
                                                            		setVisibility('aktiv', 'none');
                                                                    setVisibility('kopfhoerer_2', 'none');
                                                                    setVisibility('taster_1', 'none');
        															setVisibility('taster_2', 'none');
                                                                    setVisibility('startauto', 'none');
                                                                    setVisibility('telefon', 'none');
                                                                    setVisibility('taster_6', 'none');
                                                                    setVisibility('bewegung', 'none');
                                                                    setVisibility('nichts', 'none');
                                                                    setVisibility('extern', 'none');">
    </td>
    </tr>
    </table>
    
    <br>
    <table width="100%" border="0">
    <tr>
    	<td width="7%">Name:</td> <td width="10%"><input type="text" name="name" value=""></td>
        <td width="10%"> <div align="right">Sonstiges:</div></td>
        <td rowspan="3"><textarea name="kommentar" cols="20" rows="4" wrap="physical"></textarea></td>
    </tr>
    <tr>
    	<td width="7%">E-Mail: </td> <td width="10%"><input type="text" name="email" value=""></td>
    <tr>
   		 <td width="7%"></td><td width="10%"><input type="submit" value="Absenden" name="Absenden"></td>
    </tr>
    </table>
    
</form>
<table width="50%" border="0" height="150" align="left">
    <td width="25%" bordercolor="#000000"   valign="top">
    	<div id='hoerstation' style='display:none'>
        	<font size="-2" face="Arial">
            	<b><font size="-1">H&ouml;rstation:</font></b><br>
                Per Knopfdruck erhalten Sie akustische Informationen über Themen Ihrer Wahl.<br>
                <br>
            </font>
		</div>
		<div id='videostation' style='display:none'>
            <font size="-2" face="Arial">
            	<b><font size="-1">Videostation:</font></b><br>
				Per Knopfdruck erhalten Sie akustische und visuelle Informationen über Themen Ihrer Wahl.<br>
                <br>
            </font> 
		</div>
        
        <div id='stele160' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Stele 160cm</font></b><br>
            	Standgerät aus Aluminium, 160cm hoch, für den Inneneinsatz.
            </font>
        </div>
        
        <div id='stele60' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Stele 60cm</font></b><br>
            	Tischger&auml;t aus Aluminium, 60cm hoch, für den Inneneinsatz.
            </font>
        </div>
        
        <div id='wandaufbau' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Wandaufbau</font></b><br>
            	Geh&auml;use aus Aluminium zum Aufbau auf die Wand.
            </font>
        </div>
        
        <div id='wandeinbau' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Wandeinbau</font></b><br>
            	Geh&auml;use aus Aluminium zum Einbau in die Wand oder Tisch.
            </font>
        </div>
    </td>
    <td width="10%"></td>
    <td width="25%"   valign="top">
        <div id='aktiv' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Aktiv</font></b><br>
            	<p>Ger&auml;t mit integrierten oder externen Lautsprechern</p>
            </font>
    	</div>
    
        <div id='hoerer_1' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">1 H&ouml;rer</font></b><br>
            	<P>1 Audioh&ouml;rer ist fest über einen flexiblen Stahlschlauch mit dem Gerät verbunden.</P>
            </font>
        </div>
        
        <div id='hoerer_2' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">2 H&ouml;rer</font></b><br>
            	<p>2 Audioh&ouml;rer sind fest über einen flexiblen Stahlschlauch mit dem Ger&auml;t verbunden.</p>
            </font>
   		</div>
        
        <div id='kopfhoerer' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Kopfh&ouml;rer</font></b><br>
            	<p>1 Kopfh&ouml;rer ist fest mit dem Ger&auml;t verbunden.</p>
            </font>
        </div>
        
        <div id='kopfhoerer_2' style='display:none'>
        	<font size="-2" face="Arial">
         	<b><font size="-1">Kopfh&ouml;rer</font></b><br>
       		    <p>2 Kopfh&ouml;rer sind fest mit dem Ger&auml;t verbunden.</p>
       	    </font>
     	</div>	
      
       <div id='startauto' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Start automatisch</font></b><br>
            	<p>Strom ein und die Show l&auml;uft</p>
            </font>
        </div>
        
        <div id='taster_1' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">1 Taster</font></b><br>
            	<p>EIN Schalter</p>
            </font>
        </div>
        
        <div id='taster_2' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">2 Taster</font></b><br>
            	<p>EIN/Aus Schalter</p>
            </font>
        </div>
        
        <div id='taster_6' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">3-6 Taster</font></b><br>
            	<p>1-6 Titel direkt anw&auml;hlbar</p>
        </font>        	
        </div>
        
        <div id='telefon' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">12er Telefon Tastatur</font></b><br>
            	<p>Robuste Metalltastatur mit 12 Tasten 0...9 und + #</p>
            </font>
        </div>
        
        <div id='bewegung' style='display:none'>
        	<font size="-2" face="Arial">
            <b><font size="-1">Bewegungsmelder</font></b><br>
            	<p>Die Pr&auml;sentation wird von einem Bewegungsmelder gestartet</p>
            </font>
        </div>
        
       <div id='extern' style='display:none'>
        	<font size="-2" face="Arial">
            <b><font size="-1">externer Schaltkontakt</font></b><br>
            	<p>Das Ger&auml;t hat eine Buchse f&uuml;r einen externen Schaltkontakt</p>
            </font>
      </div>
    </td>
    <td width="10%"></td>
    <td width="25%" valign="top">
	 <div id='frost' style='display:none'>
        	<font size="-2" align="Arial">
            <b><font size="-1">Frostschutz</font></b><br>
            	<p>Ein Heizwiderstand wird automatisch bei K&auml;lte zugeschaltet</p>
            </font>
        </div>
        
        <div id='klima' style='display:none'>
        	<font size="-2" align="Arial">
            <b><font size="-1">Klimageh&auml;use</font></b><br>
            	<p>Geh&auml;use ist f&uuml;r den Ausseneinsatz vorgesehen. Heizwiderstand, Hygrostat und L&uuml;fter sorgen f&uuml;r
                optimale Temperaturverh&auml;ltnisse im Geh&auml;se.</p>
            </font>
    	</div>
        
        <div id='solar' style='display:none'>
        	<font size="-2" align="Arial">
            <b><font size="-1">Solarbetrieb</font></b><br>
                 <p>Das Ger&auml;t wird &uuml;ber ein Solarmodul betrieben. Es ist keine externe Spannungsversorgung notwendig.</p>
            </font>
        </div>    

     </td>    
  </tr>
</table>
</table>

<div id='nichts' style='display:none'>
</div>
</font>
</body>
</html>

sry 4 spam ;)
 
Hmm onchange müsstest du auf das <select> machen, aber das macht bei dir nicht wirklich viel Sinn. Du müsstest eine Funktion bauen die bei onchange aufgerufen wird und erkennt welcher <option> ausgewählt wurde. Das könnte bei der Anzahl ziemlich aufwendig werden, aber sehr wahrscheinlich die einzige Möglichkeit.

Irgendwie kommt mir nämlich <option> + onclick + IE = Problem seeehr bekannt vor :rolleyes:
 
Ah ich hab das Thema falsch verstanden, sorry.

Also dann so:
HTML:
<html>
<head>
<script>
var seleced
function showDiv(opt) {
	selected = opt.options[opt.selectedIndex].name;
	document.getElementById(selected).style.display = "inline";
}

</script>
<title>Untitled</title>
</head>

<body>
<select name="finOpt" onchange="showDiv(this)">
	<option name="option1">option1</option>
	<option name="option2">option2</option>
</select>

<div id="option1" style="dispaly:none;">Supporttext1</div>
<div id="option2" style="dispaly:none;">Supporttext2</div>

</body>
</html>
 
wie würde das denn in etwas aussehen?

Müsste ich dann bei den <optionen> teilen immer noch onClick("..function..") und in der funktion dann onChange oder bei <option> onChange("function")?
 
Hi,

du könntest die IDs der DIVs in die value-Attribute der Optionen schreiben. In der Funktion durchläufst du die aktuelle Select-Gruppe - stimmt der gewählte Index (selectedIndex) mit dem Laufindex überein, wird das Element eingeblendet, in allen anderen Fällen ausgeblendet. Aufgerufen wird die Funktion in den onchange-Events der Selects.

Das Zurücksetzen aller DIVs wird durch eine zweite Funktion realisiert. Da sich die Namen der Select-Gruppen nur durch einen Ziffer am Ende unterscheiden, kann diese als Laufindex für eine äussere for-Schleife verwendet werden.
In einer inneren Schleifen werden die Optionen durchlaufen und über ihre name-Attribute die zugehörigen DIVs ausgeblendet.

Beispiel:
Code:
<html>
<head>
<title>Produktplaner</title>
<script language="JavaScript">

function setVisibility(objSel){
  for(var i=0; i<objSel.options.length; i++){
    document.getElementById(objSel.options[i].value).style.display = (i != objSel.selectedIndex)? "none" : "block";
  }
}

function resetAll(){
  // Selects durchlaufen
  for(var i=1; i<3; i++){
    var objSel = document.getElementsByName("menu"+i)[0];
    // Options durchlaufen
    for(var j=0; j<objSel.options.length; j++){
      document.getElementById(objSel.options[j].value).style.display = "none";
    }
  }
}
</script>
</head>
<body>
<font face="Arial">
<h1 align="left">Produktplaner</h1>
<br>
<div align="left">
Für ein Angebot, wählen Sie bitte Ihre Anforderungen aus, trgane Ihre E-Mail Adresse ein<br>
und klicken auf "Absenden". Mit "Zurücksetzen" können Sie Ihre Eingaben löschen.<br>
Wir freuen uns auf Ihre Anfrage<br><br>
</div>

<table>
<tr>
<td>
<form action="templates/formularversenden2.php" method="POST">
	<select name="menu1" size="7" onchange="setVisibility(this);">
   	  <option name="Hoerstation" value="hoerstation">Hörstation</option>
	  <option name="Videostation" value="videostation">Videostation</option>
    </select>

    <select name="menu2" size="7" onchange="setVisibility(this);">
    	<option name="Stele160" value="stele160">Stele 160cm</option>

        <option name="Stele60" value="stele60">Stele 60cm</option>

    	<option name="Wandaufbau" value="wandaufbau">Wandaufbau</option>

        <option name="Wandeinbau" value="wandeinbau">Wandeinbau</option>
    </select>
    </td>
    <td valign="top">
    <input type="reset" value="Zurücksetzen" name="Reset" onclick="resetAll();">
    </td>
    </tr>
    </table>

    <br>
    <table width="100%" border="0">
    <tr>
    	<td width="7%">Name:</td> <td width="10%"><input type="text" name="name" value=""></td>
        <td width="10%"> <div align="right">Sonstiges:</div></td>
        <td rowspan="3"><textarea name="kommentar" cols="20" rows="4" wrap="physical"></textarea></td>
    </tr>
    <tr>
    	<td width="7%">E-Mail: </td> <td width="10%"><input type="text" name="email" value=""></td>
    <tr>
   		 <td width="7%"></td><td width="10%"><input type="submit" value="Absenden" name="Absenden"></td>
    </tr>
    </table>

</form>
<table width="50%" border="0" height="150" align="left">
    <td width="25%" bordercolor="#000000"   valign="top">
    	<div id='hoerstation' style='display:none'>
        	<font size="-2" face="Arial">
            	<b><font size="-1">Hörstation:</font></b><br>
                Per Knopfdruck erhalten Sie akustische Informationen über Themen Ihrer Wahl.<br>
                <br>
            </font>
		</div>
		<div id='videostation' style='display:none'>
            <font size="-2" face="Arial">
            	<b><font size="-1">Videostation:</font></b><br>
				Per Knopfdruck erhalten Sie akustische und visuelle Informationen über Themen Ihrer Wahl.<br>
                <br>
            </font>
		</div>

        <div id='stele160' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Stele 160cm</font></b><br>
            	Standgerät aus Aluminium, 160cm hoch, für den Inneneinsatz.
            </font>
        </div>

        <div id='stele60' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Stele 60cm</font></b><br>
            	Tischgerät aus Aluminium, 60cm hoch, für den Inneneinsatz.
            </font>
        </div>

        <div id='wandaufbau' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Wandaufbau</font></b><br>
            	Gehäuse aus Aluminium zum Aufbau auf die Wand.
            </font>
        </div>

        <div id='wandeinbau' style='display:none'>
            <font size="-2" face="Arial">
            <b><font size="-1">Wandeinbau</font></b><br>
            	Gehäuse aus Aluminium zum Einbau in die Wand oder Tisch.
            </font>
        </div>
    </td>
    <td width="10%"></td>
    <td width="25%"   valign="top"></td>
    <td width="10%"></td>
    <td width="25%" valign="top"></td>
  </tr>
</table>
</table>

<div id='nichts' style='display:none'>
</div>
</font>
</body>
</html>
Ciao
Quaese
 

Neue Beiträge

Zurück