Rene Rose: dynamische Erzeugung von Eventhandlern

Guten Tag!!

Nach längerer Abstinenz bin ich gezwungen wieder einmal zu HTML und JScript zu greifen.

Aufgabenstellung ist es, eine Dynamische erzeugte Liste von Schaltflächen zu erstellen. Jede Schaltfläche soll noch einen oder mehrere Eventhandler bekommen.

Zunäcst ohne Eventhandler:

Ich habe ein Array mit 31 Kürzeln für den Deutschen Aktienindex.

Eine Schleife erzeugt nun über den document.write Befehl:

document.write("<div id=chart Style='position:absolute;top:"+topposition+"px;left:0px;width:60px;height:15px;background-color: 999999' align='center'><p><font size=1><strong>"+Kursliste1[i]+"</strong></font></p></div>");

die Schaltflächen. Die Kürzel aus der Liste bilden gleichzeitig die beschriftng der Schaltfläche.
Bis hier kein Problem. leider ist es mir nicht gelungen funktionierende Eventhandler in diesen HTML Code zu integrieren.
Ist es generell möglich,mit

document.write() Eventhandler zu erzeuge? Wenn ja, auf welche Spitzfindigkeiten muß ich da achten??
Wenn nein, wie kann ich jeder der 31 Schltflächen auf anderem Wege einen Eventhanlder verpassen??

Vielen Dank Gruß Rene

  1. Hi,

    document.write("<div id=chart

    ich hoffe, Du schreibst nicht wirlich bei jedem loop "chart", eine id muss individuell sein.
    Ansonsten, von welchem eventhandler redest Du? Div kennt z. B. onclick, das kannst Du einfach mit in das div-tag schreiben:

    document.write("<div id='chart" + i + "' onclick='alert("Divid: chart" + i + "")'...

    Ansonsten solltest Du dringend Deine Html-Technik aufpolieren, sowas wie "font" ist wirklich nicht mehr up to date.

    Gruesse  Joachim

    1. Hi,

      document.write("<div id=chart
      ich hoffe, Du schreibst nicht wirlich bei jedem loop "chart", eine id muss individuell sein.
      Ansonsten, von welchem eventhandler redest Du? Div kennt z. B. onclick, das kannst Du einfach mit in das div-tag schreiben:

      document.write("<div id='chart" + i + "' onclick='alert("Divid: chart" + i + "")'...

      Ansonsten solltest Du dringend Deine Html-Technik aufpolieren, sowas wie "font" ist wirklich nicht mehr up to date.

      Gruesse  Joachim

      Danke für Deine Antwort!!

      Ich arbeite mit Dreamweaver MX6, der setzt mir die Tags fertig ein, also auch das Font Tag!! Auweia, wie Du das schreibst, fühle ich mich wie ein Opa!! :)

      Funktioniert in solch einem OnClick Eventhandler das wörtchen "this" als referenz??

      1. Hi,

        Ich arbeite mit Dreamweaver MX6, der setzt mir die Tags fertig ein, also auch das Font Tag!

        Ich denke, dass Du Dreamweaver in den Voreinstellungen sagen kannst, welchen Html-Standard er verwenden soll.

        Funktioniert in solch einem OnClick Eventhandler das wörtchen "this" als referenz??

        Wenn Du es nicht als string (in Hochkommas) reinschreibst schon.

        Gruesse  Joachim

        1. Hi,

          Ich arbeite mit Dreamweaver MX6, der setzt mir die Tags fertig ein, also auch das Font Tag!
          Ich denke, dass Du Dreamweaver in den Voreinstellungen sagen kannst, welchen Html-Standard er verwenden soll.

          Funktioniert in solch einem OnClick Eventhandler das wörtchen "this" als referenz??
          Wenn Du es nicht als string (in Hochkommas) reinschreibst schon.

          Gruesse  Joachim

          Hallo Joachim!!

          Ich bin Dir sehr dankbar, ein Test mit dem onclick="alert.. hat schon einmal funktioniert. Langsam nähere ich mich dem Problem.

          Allerdings, wie ich this als Referenz verwenen muß ist mir immer noch nicht klar:

          onMouseover='an(this)' ---> an ist eine von 3 Funktionen, die aus einem grauen Kästchen eine Schaltfläche machen, die aufleuchtet und wieder verblasst.

          function an(referenz){referenz.style.backgroundColor = "#cccccc"}
          function aus(referenz){referenz.style.backgroundColor = "#999999"}
          function maus(referenz){referenz.style.backgroundColor = "#cc6633"}

          wenn ich die Referenz so verwende: onMouseover='an(this)' bekomme ich eine Fehlermeldung. Woran liegt das??

          Vielen Dank für Deine Hilfe!!

          Gruß Rene

          1. Ich bin Dir sehr dankbar, ein Test mit dem onclick="alert.. hat schon einmal funktioniert. Langsam nähere ich mich dem Problem.

            Allerdings, wie ich this als Referenz verwenen muß ist mir immer noch nicht klar:

            onMouseover='an(this)' ---> an ist eine von 3 Funktionen, die aus einem grauen Kästchen eine Schaltfläche machen, die aufleuchtet und wieder verblasst.

            Du kennst :hover?
            http://selfhtml.teamone.de/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus

            Damit kannst du dir dieses ganze JS geraffel sparen.

            function an(referenz){referenz.style.backgroundColor = "#cccccc"}
            function aus(referenz){referenz.style.backgroundColor = "#999999"}
            function maus(referenz){referenz.style.backgroundColor = "#cc6633"}

            sollte eigentlich funktionieren.

            wenn ich die Referenz so verwende: onMouseover='an(this)' bekomme ich eine Fehlermeldung. Woran liegt das??

            Zum testen von JS immer Mozilla (oder Netscape) verwenden, die sagen dir was für ein Fehler wirklich aufgetreten ist.

            Falls du ihn schon benutzt, dann sollte die Fehlermeldung ausagekräftig genug sein dir weiter zu helfen.

            Ansonsten ist ein bisschen debugging immer gut:

            function maus(referenz){
            alert(typeof refrenz);
            alert(typeof refrenz.style);

            // Und hier sowieso und immer:
            if(referenz && refrenz.style) referenz.style.backgroundColor = "#cc6633"

            // oder umgekehrt mit Fehlermeldung:
            if(!referenz || !refrenz.style) return alert('Fehler!');

            referenz.style.backgroundColor = "#cc6633"

            }

            Struppi.

            1. Hallo Struppi!!

              Danke für Deine Antwort.

              Den ganzen Kram hab ich schon mehrfach in anderen einfachen Projekten verwendet. Die Funktionen haben bisher immer gearbeitet. Einziger Unterschied, ich erzeuge diesmal die Schaltflächen dynamisch. Den HTML code, den ich mit document.writre("... schreibe habe ich fertig aus bestehenden Projekten entnommen. Einige Tests wie oben beschrieben mit einem onclick Handler und einer alert Ausgabe funktionieren auch. Nur die OnMouseOver etc Geschichte klappt nicht. Kann es vielleicht an der Art der Verwendung von This liegen??

              Gut, also Morgen erst mal Deinen weg beschreiben, dann weitersehen!

              Gruß Rene