mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 09.07.2020 17:03 Benutzername: Passwort: Auto-Login

Thema: [Javascipt] Toggle Skript vom 27.02.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [Javascipt] Toggle Skript
Seite: 1, 2  Weiter
Autor Nachricht
ENIXone
Threadersteller

Dabei seit: 25.02.2007
Ort: Sundern
Alter: 33
Geschlecht: Männlich
Verfasst Mi 27.02.2008 10:41
Titel

[Javascipt] Toggle Skript

Antworten mit Zitat Zum Seitenanfang

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&auml;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 Lächel hoffe einer von euch kann mir helfen

greez!!
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 27.02.2008 10:55
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
achwasweisich

Dabei seit: 27.09.2007
Ort: Stuttgarter Raum
Alter: -
Geschlecht: Männlich
Verfasst Mi 27.02.2008 11:03
Titel

Antworten mit Zitat Zum Seitenanfang

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. * grmbl *


Zuletzt bearbeitet von achwasweisich am Mi 27.02.2008 11:04, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
ENIXone
Threadersteller

Dabei seit: 25.02.2007
Ort: Sundern
Alter: 33
Geschlecht: Männlich
Verfasst Mi 27.02.2008 11:19
Titel

Antworten mit Zitat Zum Seitenanfang

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&auml;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(?) * Keine Ahnung... *


Zuletzt bearbeitet von ENIXone am Mi 27.02.2008 16:08, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
ENIXone
Threadersteller

Dabei seit: 25.02.2007
Ort: Sundern
Alter: 33
Geschlecht: Männlich
Verfasst Mi 27.02.2008 16:47
Titel

Antworten mit Zitat Zum Seitenanfang

keiner ne lösung für mein prob? * Keine Ahnung... * Hä?
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 27.02.2008 17:10
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
ENIXone
Threadersteller

Dabei seit: 25.02.2007
Ort: Sundern
Alter: 33
Geschlecht: Männlich
Verfasst Mi 27.02.2008 17:18
Titel

Antworten mit Zitat Zum Seitenanfang

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&auml;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>
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 27.02.2008 19:23
Titel

Antworten mit Zitat Zum Seitenanfang

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... Lächel
  View user's profile Private Nachricht senden
 
Ä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?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.