Javascript-Problem: Funktionsparameter zur Laufzeit übergeben

  • Hi,

    ich will per Javascript Tabellenzeilen einfügen und mit Eventhandlern versehen.
    Beim Mouseover soll die Zeile mit der entsprechenden ID eingefärbt werden und bei Mouseout wieder entfärbt.

    Code
    for (id = 0; id < 10; id++){
    var neueZeile = document.createElement("tr");
    neueZeile.id = id;
    neueZeile.onmouseover = function (){rowHighlight(id)};
    neueZeile.onmouseout = function (){rowNormal(id)};
    }

    Aber egal, wo ich mit der Maus bin, nur die letzte Zeile wird ge-"highlight"-ed. Ich ahne auch, woran es liegt, kann es aber nicht lösen. Habe schon was über Closures gelesen und damit experimentiert, komme nicht weiter.
    Könnte mir jemand einen Hinweis geben?

    Danke schonmal
    Zap

    "Wer grundlegende Freiheiten aufgibt, um vorübergehend ein wenig Sicherheit zu gewinnen, verdient weder Freiheit noch Sicherheit."
    Benjamin Franklin

    mein Rechenknecht

  • 'element.id' ist ein "Bezeichner", oder etwas silbengetreuer übersetzt (identifier), ein "Identifikator". Der sollte nach Möglichkeit wie jeder Bezeichner auch mit Buchstaben beginnen. Also vielleicht:

    Code
    id_str = "tr"+id;
    neueZeile.id = id_str;
    neueZeile.onmouseover = function (){rowHighlight(id_str)};
    neueZeile.onmouseout = function (){rowNormal(id_str)};

    Das ist aber sicher erst mal nur der halbe Ansatz.

    Das zweite Problem wäre eventuell (aber da bin ich nicht sicher), dass für die Eventhandler vielleicht die Variablen während der Zuweisung nicht in Konstanten aufgelöst werden, sondern variabel bleiben - also dass dann für Tabellenzeile "tr5" vielleicht nicht wie erwartet

    onmouseover = "rowHighlight('tr5')"

    steht, sondern immer noch

    onmouseover = "rowHighlight(id_str)" !? (Wäre nach meinem Verständnis eigentlich Unsinn...)

    Da könnte der DOM-Inspektor von Mozilla vielleicht helfen.

  • Da könnte der DOM-Inspektor von Mozilla vielleicht helfen.


    War ein guter Hinweis, ich nutze Firebug, aber noch nicht sehr lange :redface:
    Der sagt mir, dass die Events richtig gesetzt sind, aber sie verhalten sich falsch :huh:
    also da steht

    Code
    <tr id="1" onmouseover="rowHighlight('1')" ... >...</tr>


    aber er highlighted stattdessen die letzte Zeile :nein:
    sehr seltsam...

    Zap

    EDIT: Also in den Eventhandlern steht das richtige ('1'), aber es kommt in der Funktion das falsche an ('2'). Sieht aus als gäbe es einen Unterschied zwischen dem, was der Firebug im DOM anzeigt, und was zur Laufzeit ausgeführt wird...

    "Wer grundlegende Freiheiten aufgibt, um vorübergehend ein wenig Sicherheit zu gewinnen, verdient weder Freiheit noch Sicherheit."
    Benjamin Franklin

    mein Rechenknecht

  • Heureka!
    ich habe immer dieselbe anonyme Funktion () an die Eventhandler gebunden. Und zur Laufzeit wurde der Wert der Variablen ausgelesen, nicht die id des Objekts.

    Code
    neueZeile.onmouseover = function (){rowHighlight(this.id);};


    nimmt zur Ausführungszeit der Funktion rowHighlight mit "this" die id des aufrufenden Objekts! Und dat jeht!

    Firebug ist die eierlegende Wollmilchsau der HTML/ CSS/ Javascript- Debugger.

    Zap

    "Wer grundlegende Freiheiten aufgibt, um vorübergehend ein wenig Sicherheit zu gewinnen, verdient weder Freiheit noch Sicherheit."
    Benjamin Franklin

    mein Rechenknecht

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!