| Autor |
Nachricht |
ENIXone
Threadersteller
Dabei seit: 25.02.2007
Ort: Sundern
Alter: 37
Geschlecht: 
|
Verfasst Mi 27.02.2008 10:41
Titel [Javascipt] Toggle Skript |
  |
|
Hey Leutz,
mein Firebug zeigt mir hier ständig 2 Fehlermeldungen an, kann mit den aber nichts anfangen.
1. invalid assignment left-hand side
2. toggle is not defined
hier mal das skript:
| Code: |
<script type="text/javascript">
function toggle(){
var datafile = document.getElementsByName('datafile');
if (datafile) {
if (datafile.value == 'bild' && document.getElementById('bild').style.display = 'none' )
{
document.getElementById('bild').style = '';
}
if(datafile.value == 'movie' && document.getElementById("movie").style.display = 'none'){
document.getElementById('movie').style = '';
}
else {
document.getElementById("bild").style.display = 'none';
document.getElementById("movie").style.display = 'none';
}
}
}
</script> |
und das formular
| Code: |
<form method="post" action="<?=$PHP_SELF;?>" enctype="multipart/form-data">
<table width="300" border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="300">Vorname:<br>
<input type="text" name="vorname" style="width:200px;"></td>
</tr>
<tr>
<td width="300">Name:<br>
<input type="text" name="name" style="width:200px;"></td>
</tr>
<tr>
<td width="300">Email<br>
<input type="text" name="email" style="width:200px;"></td>
</tr>
<tr>
<td width="300">Dateiart bitte auswählen<br>
<select name="datafile" size="1" style="width:200px;" onchange="toggle();">
<option value="">bitte auswählen...</option>
<option value="bild">Bild (bis 1 MB)</option>
<option value="movie">Video (bis 5 MB)</option>
</select><br>
<div style="float:left;display:none;" id="bild">Bild:<br>
<input type="file" name="filePic" style="width:330px;">
</div>
<div style="float:left;display:none;" id="movie">Video:<br>
<input type="file" name="fileMovie" style="width:330px;">
</div>
<br>
</td>
</tr>
<tr>
<td width="300"><input type="submit" name="send" value="Abschicken"></td>
</tr>
</table>
</form> |
Bin nicht gerade nen JS Freak und arbeite nur selten mit, daher kann ich den fehler auch net gerade finden  hoffe einer von euch kann mir helfen
greez!!
|
|
| |
  |
 |
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 27.02.2008 10:55
Titel
|
|
|
Ich hab beim Überfliegen 2 klassische Anfängerfehler gefunden. 1.) mach aus "=" (zuweisung) ein "==" (vergleich) in deinen if-abfragen. 2.) Platziere die Funktion toggle() in den seitenheader falls nicht geschehen und binde sie an das onload-Event des Fensters, damit die Funktion auch den kompletten DOM-Baum kennt und dieser wiederum die Funktion:
window.onload = function () { function toggle() { .... }}
3.) Verwende eine Javascript-IDE, bspw. Aptana, um dein Script zu debuggen und auf weitere syntaktische Fehler zu prüfen. Dann solltest du das Problem in den Griff kriegen.
|
|
| |
|
|
|
Anzeige
|
|
|
achwasweisich
Dabei seit: 27.09.2007
Ort: Stuttgarter Raum
Alter: -
Geschlecht:
|
Verfasst Mi 27.02.2008 11:03
Titel
|
|
|
| Code: |
if (datafile.value == 'bild' && document.getElementById('bild').style.display = 'none' )
{
...
}
if(datafile.value == 'movie' && document.getElementById("movie").style.display = 'none'){
...
}
|
Zum einen besser lesbar (wegen der zusätzlichen Klammerung) und zum anderen korrekt (wegen der zwei ==) wäre wohl das hier:
| Code: |
if ((datafile.value == 'bild') && (document.getElementById('bild').style.display == 'none'))
{
...
}
if((datafile.value == 'movie') && (document.getElementById("movie").style.display == 'none')){
...
}
|
Probier mal so.
----
edit: bacon war schneller. 
Zuletzt bearbeitet von achwasweisich am Mi 27.02.2008 11:04, insgesamt 1-mal bearbeitet
|
|
| |
|
|
ENIXone
Threadersteller
Dabei seit: 25.02.2007
Ort: Sundern
Alter: 37
Geschlecht:
|
Verfasst Mi 27.02.2008 11:19
Titel
|
|
|
Also ich hab das jetzt mal umgeändert, aber er zeigt mir immernoch die fehlemeldung "toggel undefined" an
| Code: | <head>
<script type="text/javascript">
window.onLoad = function(){
function toggle(){
var datafile = document.getElementsByName('datafile');
if (datafile) {
if ((datafile.value == 'bild') && (document.getElementById('bild').style.display == 'none') )
{
document.getElementById('bild').style == '';
}
if((datafile.value == 'movie') && (document.getElementById("movie").style.display == 'none') ){
document.getElementById('movie').style == '';
}
else {
document.getElementById("bild").style.display == 'none';
document.getElementById("movie").style.display == 'none';
}
}
}
}
</script>
</head>
<body>
<form method="post" action="<?=$PHP_SELF;?>" enctype="multipart/form-data">
<table width="300" border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="300">Vorname:<br>
<input type="text" name="vorname" style="width:200px;"></td>
</tr>
<tr>
<td width="300">Name:<br>
<input type="text" name="name" style="width:200px;"></td>
</tr>
<tr>
<td width="300">Email<br>
<input type="text" name="email" style="width:200px;"></td>
</tr>
<tr>
<td width="300">Dateiart bitte auswählen<br>
<select name="datafile" size="1" style="width:200px;" onchange="toggle();">
<option value="">bitte auswählen...</option>
<option value="bild">Bild (bis 1 MB)</option>
<option value="movie">Video (bis 5 MB)</option>
</select><br>
<div style="float:left;display:none;" id="bild">Bild:<br>
<input type="file" name="filePic" style="width:330px;">
</div>
<div style="float:left;display:none;" id="movie">Video:<br>
<input type="file" name="fileMovie" style="width:330px;">
</div>
<br>
</td>
</tr>
<tr>
<td width="300"><input type="submit" name="send" value="Abschicken"></td>
</tr>
</table>
</form>
</body>
|
Hab alles so geändert das es doch eig. stimmen müsste(?) 
Zuletzt bearbeitet von ENIXone am Mi 27.02.2008 16:08, insgesamt 2-mal bearbeitet
|
|
| |
|
|
ENIXone
Threadersteller
Dabei seit: 25.02.2007
Ort: Sundern
Alter: 37
Geschlecht:
|
Verfasst Mi 27.02.2008 16:47
Titel
|
|
|
keiner ne lösung für mein prob? 
|
|
| |
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 27.02.2008 17:10
Titel
|
|
|
Wenn du die Funktion innerhalb des anonymen onload (kleingeschrieben, btw)-Callbacks definierst, steht sie acuh nur in diesem Scope zur Verfügung. Also: Mach sie erstmal global verfügbar, indem du den Funktionsnamen mit var außerhalb des Callbacks deklarierst.
Bei näherer Betrachtung brauchen wir den onload-handler aber gar nicht, da das Ding ja eh per change-Event aufgerufen wird. Nimm ihn also wieder raus.
| Code: |
window.onLoad = function(){
function toggle(){ |
Diese Syntax ist ungültig. Richtig wäre window.onload = function() { toggle = function(){...} }. Ohne das Schlüsselwort var definierst du toggle auch direkt autoglobal, was hin und wieder zu unerwünschten ergebnissen führen kann.
Die 100000 Möglichkeiten, in Javascript ne Funktion zu schreiben (ohne auf Objekte und Instanzen einzugehen):
| Code: | // definition als globale funktion:
function toggle()
{
alert("hanswurst");
return false;
}
// definition als lokale funktion vom window-scope:
var toggle = function()
{
alert("hanswurst");
return false;
}
//mit onload-handler, als lokale funktion vom window-scope
var toggle;
window.onload = function()
{
toggle=function()
{
alert ("hanswurst");
return false;
}
}
//mit onload-handler, als lokale funktion vom onload-callback-scope
window.onload = function()
{
var toggle=function()
{
alert ("hanswurst");
return false;
}
}
// mit onload-handler und globaler funktion. vorsicht: kann zu unvorhergesehenen ergebnissen führen.
window.onload = function()
{
toggle=function()
{
alert("hanswurst");
return false;
}
} |
Zuletzt bearbeitet von bacon am Mi 27.02.2008 17:14, insgesamt 2-mal bearbeitet
|
|
| |
|
|
ENIXone
Threadersteller
Dabei seit: 25.02.2007
Ort: Sundern
Alter: 37
Geschlecht:
|
Verfasst Mi 27.02.2008 17:18
Titel
|
|
|
Also ich hab das ganze jetzt mal vereinfacht und bissel umgebaut.
jetzt bekomme ich zar keine fehlermeldung mehr, aber er macht auch nicht das was er soll.
Er zeigt mir die <div>'s nicht an wenn man zB bild im select augewählt hat.
| Code: | <head>
<script type="text/javascript">
function toggle(){
if (document.getElementById('datafile').value == 'bild')
{
document.getElementById('bild').style.display == 'block';
document.getElementById('movie').style.display == 'none';
}
if(document.getElementById('movie').value == 'movie'){
document.getElementById('bild').style.display == 'none';
document.getElementById('movie').style.display == 'block';
}
else {
document.getElementById("bild").style.display == 'none';
document.getElementById("movie").style.display == 'none';
}
}
</script>
</head>
<body>
<form method="post" action="<?=$PHP_SELF;?>" enctype="multipart/form-data">
<table width="300" border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="300">Vorname:<br>
<input type="text" name="vorname" style="width:200px;"></td>
</tr>
<tr>
<td width="300">Name:<br>
<input type="text" name="name" style="width:200px;"></td>
</tr>
<tr>
<td width="300">Email<br>
<input type="text" name="email" style="width:200px;"></td>
</tr>
<tr>
<td width="300">Dateiart bitte auswählen<br>
<select id="datafile" name="datafile" size="1" style="width:200px;" onChange="toggle();">
<option value="">bitte auswählen...</option>
<option value="bild">Bild (bis 1 MB)</option>
<option value="movie">Video (bis 5 MB)</option>
</select><br>
<div style="float:left;display:none;" id="bild">Bild:<br>
<input type="file" name="filePic" style="width:330px;">
</div>
<div style="float:left;display:none;" id="movie">Video:<br>
<input type="file" name="fileMovie" style="width:330px;">
</div>
<br>
</td>
</tr>
<tr>
<td width="300"><input type="submit" name="send" value="Abschicken"></td>
</tr>
</table>
</form>
</body>
|
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 27.02.2008 19:23
Titel
|
|
|
Oben rum so:
| Code: |
<script type="text/javascript">
function toggle(el) {
switch (el.value) {
case 'bild':
document.getElementById('bild').style.display = 'block';
document.getElementById('movie').style.display = 'none';
break;
case 'movie':
document.getElementById('bild').style.display = 'none';
document.getElementById('movie').style.display = 'block';
break;
default:
document.getElementById("bild").style.display = 'none';
document.getElementById("movie").style.display = 'none';
break;
}
}
</script>
|
unten rum so:
| Code: | ...
<select id="datafile" name="datafile" size="1" style="width:200px;" onChange="toggle(this);return false;">
...
|
Nur User ohne JavaScript schaun halt in die Röhre...
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Textlinks / -buttons + Javascipt
Blasenpopup mit Javascipt oder Ajax?
toggle funktion ?
jquery Toggle onLoad
scriptaculous toggle Effekt abändern
toggle display in HTML-Link?
|
|
Willkommen auf dem Portal für Mediengestalter
