Javascript: Variable an Funktion übergeben?

Liebe Was-Wissende,

ich habe ein kleines Problem mit einer Javascript-Funktion, die mich seit einigen Stunden in den Wahnsinn treibt. Vielleicht kann mir ja jemand von euch helfen.

Die Funktion, aus der das folgende Schnipsel stammt, wird bei Mausklick auf eine Tabellenzelle (deren ID dem Wert der Variable „curdate“ entspricht) ausgelöst und soll diese dann farbig markieren.

Die Variable „curdate“ ist definitiv verfügbar und gefüllt, sie lässt sich separat an derselben Stelle auch ausgeben.

document.getElementsByTagName(„td“)[curdate].bgColor=color;

Nun bekomme ich immer die Rückmeldung, dass „document.getElementsByTagName(„td“)[curdate]“ undefiniert sei (wenn ich einen Beispielwert anstelle der Variable in den eckigen Klammern angebe, passiert das nicht). Anscheinend versteht das Script nicht, dass ihm hier eine Variable übergeben wird und es nicht um eine Zelle mit der ID „curdate“ geht. Weiß jemand, wie ich ihm das verdeutlichen kann?

Vielen Dank!

Hallo threechords

Warum erstellst du nicht einfach eine

function a (b)
{
document.getElementByID(b).bgColor=color;
}

und machst beim Onclick einfach onclick=„a(curdate-id)“

dann darfst du halt nur nicht für mehrere Tags die gleiche ID benutzen.

Hoffe es wahr hilfreich.

Hallo threechords,
ohne das ganze Ding zu sehen, ist eine Antwort immer ein wenig schwierig. Aber zwei Dinge, die Dir helfen könnten kann ich Dir sagen:

1.) Wenn das Ding schon einen ID hat, warum nimmst Du dann nicht gleich getElementByID? Das sollte schneller gehen und weniger fehleranfällig sein. Also zuerstmal

meineZelle=document.getElementById(„curdate“);

damit kannst Du über meineZelle drauf zugreifen

2.) Die Zuweisung von HTML Eigenschaften ist mir noch nie untergekommen. Mach das mal besser mit einem stylesheet. In deinem CSS definierst Du dann eine KLasse:

.roterHintergrund {background-color:red;}

Und dann weist Du eben in Deiner Funktion Deinem Element diese Klasse zu:

meineZelle=document.getElementById(„curdate“);
meineZelle.class=roterHintergrund;

Das ist jetzt mal ohne Anspruch auf Richtigkeit des Codes so hingepinselt, ich hab den Code jetzt nicht ausprobiert. Aber um das ggf. zu debuggen oder zu verfeinern schau ma Besten mal hier nach:
http://de.selfhtml.org/javascript/index.htm

Gruß,
Thomas

Hallo,
danke für eure Antworten!

Das Problem ist mittlerweile gelöst, wenn auch nur im Firefox. Irgendwann hat er es akzeptiert, als ich den Pfad immer kleinschrittiger in Variablen zerteilt habe.
Der IE mag es immer noch nicht, hab jetzt sicherheitshalber noch eine alternative Visualisierung derselben Information eingebaut, die so oder so nicht schadet.

Mit getElementById hatte ich es ebenso erfolglos probiert. Mit direkter CSS-Zuweisung ebenso, auch wenn die in der endgültigen Lösung wieder enthalten ist.

Insofern gibt Javascript mir immer noch Rätsel auf, dennoch vielen Dank für eure Mühen!

naja, nur für FF ist ja nicht wirklich ne Lösung, das erreicht nur ca. 20% der User. Magst Du mal den Code posten oder mir schicken? An sich ist dieses Problem trivial und ich hab das schon zigmal gemacht, ohne daß es dabei solche Probleme gab. Klappt vom IE6 bis zu allen aktuellen Browsern.
Gruß,
Thomas

naja, nur für FF ist ja nicht wirklich ne Lösung, das erreicht
nur ca. 20% der User.

In diesem Fall ist es etwas anders - laut Zugriffstatistiken benutzt die absolute Mehrheit der Besuchenden FF. Für die anderen gäbe es eben ein optisches Gimmick weniger. Gebe dir aber grundsätzlich Recht.

Magst Du mal den Code posten oder mir

schicken?

Hier die ganze Funktion, mittlerweile mit IE-Filter:

function bgdefault (color, color2, date) {
for (var i = 0; i

Also, ich hab Dir mal was zusammengeschrieben, was die Anforderungen Deiner ersten Frage erfüllt. Allerdings habe ich mangels dem zugehörigen HTML und dem dortigen Aufruf Deiner Funktion nicht verstanden, was es mit dem loop und dem caldate auf sich hat. Und da scheint ja Dein eigentliches Problem zu liegen - in der Identifizierung mehrerer Zellen mit unterschiedlichen ID’s. Wenn Du dabei Hilfe brauchst, poste mal noch den die Seite zur Funktion, ggf. gekürzt.
Die Seite unten ist komplett mit js und css und funktioniert in IE 6 und 9, FF10 und Chrome.
Viele Grüße,
Thomas
-------------------ab hier Code---------------

Switch die Farbe
function colorswitch() {
var myCell=document.getElementById(„curdate“);
if (myCell.className==„green“){
myCell.className=„red“;
} else {
myCell.className=„green“;
}

}

body{font-family: verdana; font-size: 10pt;}
td{font-family: verdana; font-size: 10pt;} /*für den doofen IE*/
.green{background-color: green; color: white; font-weight: bold;}
.red{background-color: red; color: white; font-weight: bold; font-style: italic;}

Hinweis: Nichts für Rot-Grün Schwäche

das ist die Curdate Zelle
Nur etwas Text
Nur etwas Text
Nur etwas Text
Nur etwas Text
Nur etwas Text
Nur etwas Text
Nur etwas Text
Nur etwas Text

1 Like

Hallo Thomas,
danke für deine Mühen. Den Loop gibt es, weil die ganze Tabelle abgegrast werden soll - es handelt sich um einen Kalender, in dem man einen Tag auswählen kann, der dann farbig markiert werden soll. Wenn man einen Tag anklickt, werden alle anderen Tage durchgegangen, um eine eventuelle vorherige Markierung wieder zu löschen. Darum wird auch ein Zugriff auf die Tabellenzelle via Variable nötig - es gibt keine Zelle namens „caldate“ oder „curdate“, dies sind nur Platzhalter für eine jeweilige Zelle, deren ID einem bestimmten Datum entspricht. Insofern ist deine Funktion nicht ganz das, was ich suche.

Die Möglichkeit, das über eine Klasse zu regeln, ist aber natürlich auch nicht schlecht.

Trotzdem kommt es immer wieder aufs selbe raus: Sowohl FF als auch IE melden, dass „tdstring“ undefined sei (hab die Variable jetzt mal vor der Schleife leer deklariert und fülle sie dann erst in der Schleife, kein Unterschied). Im FF kann ich sie aber trotzdem benutzen und alles funktioniert - im IE nicht.

Das Problem scheint also nach wie vor die Verwendung einer Variable im Pfad zur Tabellenzelle zu sein. Weiß jemand, wie man das löst?

Also das Problem wäre gelöst, ich hab da mal schnell ne Demo gebastelt, die genau das tut. Ohne Dein HTML mußte ich den loop über ein Hilfsdatum simulieren. Das Objekt TD wird in IE und FF übergeben und es passiert auch das richtige - im FF. Der IE färbt immer die nächsthöhere Zelle, obwohl er in einem debug-alert den richtigen Wert ausgibt. Aber vielleicht passiert das mit Deinen Werten ja gar nicht.
Viele Grüße,
Thomas

-----------------Code--------------

Switch die Farbe

function bgdefault (date) { //übergebe Zellen-ID
var color = „white“; //fixiert weil einfacher
var color2 =„green“;
var myDate = new Date(2012,03,01); // Datum als Hilfswert, weil das Original HTML fehlt

for (var i = 1; i <= 9; i++) {

myDate.setDate(i); //setzt den Tag im Hilfswert hoch

//Debuginfo, schreibt die Liste der Hilfs-IDs
/* var curdate = ((myDate.getDate()-1)+"."+(myDate.getMonth())+"."+myDate.getFullYear()); //steht jetzt in den Blöcken für die Browser
var newLI = document.createElement(„li“);
var newLIText = document.createTextNode(curdate+" ");
document.getElementById(„Liste“).appendChild(newLI);
document.getElementsByTagName(„li“)[i].appendChild(newLIText);
*/

if(navigator.appName == ‚Microsoft Internet Explorer‘) {
var curdate = ((myDate.getDate()-1)+"."+(myDate.getMonth())+"."+myDate.getFullYear()); // generiert curdate in der Form, wie sie in den IDs steht aus dem Hilfswert myDate
mytd = document.getElementsByTagName(„td“)[curdate]; //holt das Object - funktioniert
if(curdate !== date) {

mytd.style.backgroundColor=color;
}
else {
mytd.style.backgroundColor=color2; //und hier färbt der IE leider die ID curdate plus eins, der FF machts richtig
alert(curdate+" = "+date); //gibt die Vergleichswerte nochmal aus, die sind wirklich gleich und richtig
}

} else { //FF und andere Browser
var curdate = (myDate.getDate()+"."+(myDate.getMonth())+"."+myDate.getFullYear()); // generiert curdate in der Form, wie sie in den IDs steht aus dem Hilfswert myDate
mytd = document.getElementsByTagName(„td“)[curdate]; //holt das Object
if(curdate !== date) { //vergleicht
mytd.style.backgroundColor=color; //setzt die Farbe erfolgreich
}
else {
mytd.style.backgroundColor=color2;
}

}

}
}

body{font-family: verdana; font-size: 10pt;}
td{font-family: verdana; font-size: 10pt;} /*für den doofen IE*/

01.03.2012
02.03.2012
03.03.2012
04.03.2012
05.03.2012
06.03.2012
07.03.2012
08.03.2012
09.03.2012

  1. Element
1 Like

Hallo Thomas,
danke für deine Hilfe. Dein Code funktioniert bei mir auch, bekomme aber auch das „falsche“ Datum nicht weg (hab ihn darum auch noch nicht in meinen Quellcode importiert).
Hatte mittlerweile auch den Verdacht, dass beim IE das Datum mit den Punkten ein Problem sein könnte (einmal hat irgendeine Fehlermeldung einen Code ausgespuckt, in dem der Pfad ohne die eckigen Klammern vermerkt war, und da wurd es dann eben zu td.2012.03.01…). Aber selbst mit Unterstrichen statt Punkten funktioniert es im IE einfach nicht. Ich habe jetzt wahrscheinlich mehr als 5 Arbeitsstunden auf diesen lächerlichen Fitzel verwendet und muss es wohl bei der Behelfslösung belassen.
Danke trotzdem noch mal!