Jimmy: Objekt erwartet

IE 6+7 geben mir eine Fehlermeldung 'Objekt erwartet'. Firefox funktioniert.

Aufruf:

<a id="menu_sub_pic_link_1" onclick="showMainPic('1');" class="menupic active"><img id="menu_sub_pic_1" src="fileadmin/templates/images/projects/fischer01.jpg" alt="Menu Picture" /></a>

Javascript:

function showMainPic(nr) {

src = document.getElementById("menu_sub_pic_" + nr).src;
 len = src.length;
 ext = src.substring(len,len-3);
 clr = src.substring(len,len-9);

if ((ext=="jpg" || ext=="gif" || ext=="png") && clr !="clear.gif") {
  strArr = src.split(".");
  mainPic = strArr[0];

for(i=1;i<strArr.length-1;i++) {
   mainPic = mainPic + "." + strArr[i];
  }
  mainPic = mainPic + "gross." + strArr[i];
  document.getElementById("mainpic").src = mainPic;
  document.getElementById("menu_sub_pic_link_" + nr).class = "menupic active";
 }
}

Es handelt sich dabei um ein Thumbnailmenu (mit max. 3 Thumbnails). Wenn man auf einen der Thumbnails draumklickt, soll das entsprechend Hauptbild geladen werden. Gleichzeitig müssen die Klassen angepasst werden. Im Beispiel funktioniert erst das setzen des 'active' Klasse des entsprechenden Thumbnails.

Was ich bisher über 'Objekt erwartet' gelesen habe, kommt dieser Fehler vor allem dann vor, wenn man das Argument nicht in Hochkomma einschliesst. Sonst habe ich nichts gefunden.

Hat jemand eine Ahnung, was das Problem sein könnte? Wäre für die Hilfe sehr dankbar.

Jimmy

  1. Hallo,

    IE 6+7 geben mir eine Fehlermeldung 'Objekt erwartet'.

    ...

    document.getElementById("menu_sub_pic_link_" + nr).class = "menupic active";

    IE bringt hier beim Parsen des JavaScripts den Fehler "Bezeichner Erwartet". Das HTML-Attribut class repräsentiert sich im JavaScript in der Eigenschaft [HTMLElement].className. Das Schlüsselwort class ist im JavaScript aus anderen Gründen reserviert, siehe http://de.selfhtml.org/javascript/sprache/reserviert.htm.

    Nach diesem Fehler ist die Funktion showMainPic(nr) nicht bekannt und führt, beim Versuch sie aufzurufen, zur Fehlermeldung, die Du bekommen hast.

    viele Grüße

    Axel

    1. Hallo,

      IE 6+7 geben mir eine Fehlermeldung 'Objekt erwartet'.
      ...
        document.getElementById("menu_sub_pic_link_" + nr).class = "menupic active";
      IE bringt hier beim Parsen des JavaScripts den Fehler "Bezeichner Erwartet". Das HTML-Attribut class repräsentiert sich im JavaScript in der Eigenschaft [HTMLElement].className. Das Schlüsselwort class ist im JavaScript aus anderen Gründen reserviert, siehe http://de.selfhtml.org/javascript/sprache/reserviert.htm.

      Nach diesem Fehler ist die Funktion showMainPic(nr) nicht bekannt und führt, beim Versuch sie aufzurufen, zur Fehlermeldung, die Du bekommen hast.

      Das hat geklappt. Vielen Dank. Eigentlich komisch, dass Firefox trotz diesen schwerwiegenden Fehlers funktionierte. Andernfalls könnte man ja vielleicht sogar slebst drauf kommen. :-)

      Jimmy

  2. Hallo Jimmy,

    Ich habe mir mal erlaubt, ein bisschen mit deinem Code zu spielen und finde, dass du wahnsinning viel Aufwand betreibst, um ans Ziel zu kommen.

    src = document.getElementById("menu_sub_pic_" + nr).src;

    du arbeitest hier mit 'nr', mit 'this' haettest du fast eine direkt Referenz auf das Bild. Schluesselwort 'var' fehlt

    ext = src.substring(len,len-3);

    Was ist bei Extension laenger als 3 Zeichen (auch wenn die in deinem Beispiel nicht vorkommen)

    strArr = src.split(".");

    Diese ganze Zerlegen und Zusammenbauen koenntest du mit einem replace loesen, da dir die Endung ohnehin bekannt ist. Im Endeffekt machst du ja nur aus 'foo.jpg' ein 'foogross.jpg'

    document.getElementById("menu_sub_pic_link_" + nr).class = "menupic active";

    Mit 'this' waere das einfacher

    Das Ergebnis saehe dann so aus:

      
    <a id="menu_sub_pic_link_1" onclick="showMainPic(this);" class="menupic active">  
    <!-- hier auf das Argument achten__________________^ -->  
    
    

    ----------------------

      
    function showMainPic(sender) {   // sender ist das 'this' aus dem Link, also eine direkte Referenz darauf  
      
      var pic = sender.getElementsByTagName('img')[0];     // hier ist dein Bild, die Id brauchst du nicht mehr  
      var len = pic.src.length;  
      var ext = pic.src.substring(pic.src.lastIndexOf('.') + 1, len);          // funktioniert auch mit laengeren Endungen  
      var clr = pic.src.substring(len, len - 9) == 'clear.gif' ? true : false;   // dann ist das auch schon mal geklaert  
      
      if((ext == 'jpg' || ext == 'gif' || ext == 'png') && !clr) {  
        document.getElementById("mainpic").src = pic.src.replace('.' + ext, 'gross.' + ext); // ist doch simpler, oder?  
      }  
      
      sender.className = "menupic active"; // In Javascript muss es className heissen, auch hier wieder Referenz auf den Link  
    }  
    
    

    </body>
    </html>
    Gruß,

    Dieter

  3. <a id="menu_sub_pic_link_1" onclick="showMainPic('1');" class="menupic active"><img id="menu_sub_pic_1" src="fileadmin/templates/images/projects/fischer01.jpg" alt="Menu Picture" /></a>

    Mal abgesehen davon, dass eine ID eindeutig sein muss, ist das sehr umständlich.
    Warum verwendest du einen Link, wenn du nicht mal ein Ziel hast?
    Das img Elemente kennt den onclick Event, dann würdest du auch niemand der kein JS Kann mit diesem nutzlosen Link verwirren, der zudem das JS unnötig kompliziert macht.

    <img src="fileadmin/templates/images/projects/fischer01.jpg"
    alt="Menu Picture"
    onclick="showMainPic(this);"
    />

    Javascript:

    Da fehlt noch die Prüfung auf die Dateiendung.
    Die CSS Klasse heißt in JS className

    function showMainPic(pic)
    {
       var  src = pic.src.replace(/(..*)/, 'gross$1');
       document.getElementById("mainpic").src = mainPic;
       pic.className =  "menupic active";
    }

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    1. Mal abgesehen davon, dass eine ID eindeutig sein muss, ist das sehr umständlich.
      Warum verwendest du einen Link, wenn du nicht mal ein Ziel hast?
      Das img Elemente kennt den onclick Event, dann würdest du auch niemand der kein JS Kann mit diesem nutzlosen Link verwirren, der zudem das JS unnötig kompliziert macht.

      Onclick im img element ist nicht xhtml konform (gemäss W3C Validator). Ausserdem hatte ich Probleme mit IE, wenn ich keinen Link verwendet habe, speziell mit dem Design, das vorgegeben ist (border, hover, etc.).

      onclick="showMainPic(this);"

      function showMainPic(pic)
      {
         var  src = pic.src.replace(/(..*)/, 'gross$1');
         document.getElementById("mainpic").src = mainPic;
         pic.className =  "menupic active";
      }

      Gefällt mir sehr gut. Vielen Dank.

      Wie spreche ich die anderen zwei Elemente an, wenn ich ohne ID arbeite?

      Jimmy

      1. Onclick im img element ist nicht xhtml konform (gemäss W3C Validator). Ausserdem hatte ich Probleme mit IE, wenn ich keinen Link verwendet habe, speziell mit dem Design, das vorgegeben ist (border, hover, etc.).

        wenn du XHTML verwenden willst, dann musst du den Handler per JS zuweisen.
        Der IE 6 kann nur :hover nicht (der IE 7 kann es soweit ich weiß), das CSS sollte funktionieren.

        onclick="showMainPic(this);"

        function showMainPic(pic)
        {
           var  src = pic.src.replace(/(..*)/, 'gross$1');
           document.getElementById("mainpic").src = mainPic;
           pic.className =  "menupic active";
        }

        Gefällt mir sehr gut. Vielen Dank.

        Wie spreche ich die anderen zwei Elemente an, wenn ich ohne ID arbeite?

        Welche anderen zwei Elemente?

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        1. Welche anderen zwei Elemente?

          Es handelt sich um drei Bilder (Thumbnails). Alle sollen beim Anklicken das Hauptbild wechseln. Ich verstehe (this), was das aktuelle Element anspricht. Aber ich muss ja trotzdem noch die Klassen der beiden anderen Bilder anpassen.

          das aktuelle Element -> menupic active
          die anderen Elemente -> menupic

          JImmy

          1. Es handelt sich um drei Bilder (Thumbnails). Alle sollen beim Anklicken das Hauptbild wechseln. Ich verstehe (this), was das aktuelle Element anspricht. Aber ich muss ja trotzdem noch die Klassen der beiden anderen Bilder anpassen.

            Das war aber im Orginalcode auch nicht drin, oder?

            das aktuelle Element -> menupic active
            die anderen Elemente -> menupic

            Dann merk dir die Referenz auf das vorherige Element das angeklickt wurde und setzt es bei einem click auf ein anderes Element zurück.

            Struppi.

            --
            Javascript ist toll (Perl auch!)
      2. Hallo,

        Onclick im img element ist nicht xhtml konform (gemäss W3C Validator).

        Wenn du das Attribut korrekt klein schreibst (»onclick«), sollte es sehrwohl konform sein.

        Mathias

        --
        »No nations, no borders.«
        SELFHTML Weblog
        1. Wenn du das Attribut korrekt klein schreibst (»onclick«), sollte es sehrwohl konform sein.

          Yep, habe es nochmals mit Validator getestet. Keine Ahnung wieso es zuerst nicht funktionierte.

          Jimmy

    2. hi,

      Warum verwendest du einen Link, wenn du nicht mal ein Ziel hast?
      Das img Elemente kennt den onclick Event, dann würdest du auch niemand der kein JS Kann mit diesem nutzlosen Link verwirren, der zudem das JS unnötig kompliziert macht.

      Ein Link ist auch bei Tastaturnavigation wie gewohnt ansteuerbar - ein Bild nicht.
      Wenn schon kein Link, sollte man dann also ggf. einen Button wählen.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }