Objekt erwartet
Jimmy
- javascript
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
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
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
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
<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.
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
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.
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
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.
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
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
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