# onclick in DOM eintragen



## SAMariter (7. September 2010)

Hallo zusammen.

Ich stehe mal wieder auf dem Schlauch. Ich möchte per JS einen EventHandler an ein DOM-Element anhängen. Das habe ich nun so gelöst:


```
domeintrag.setAttribute("onclick", "herstellerauswaehlen('" + result[f].categories_id + "', '" + result[f].categories_name + "')");
```

das würde auch ganz gut funktionieren, ABER natürlich nicht in Müll-IE 6.

Wie kann ich das sonst schreiben, das das auch wirklich jeder Browser versteht?

Danke euch.


CU SAM
gebrauchte Autoteile.
Tuning Teile Online


----------



## ComFreek (7. September 2010)

Das geht mit element.addEventListener():

```
domeintrag.addEventListener("click", "herstellerauswaehlen('" + result[f].categories_id + "', '" + result[f].categories_name + "')");
```
Mehr erfährst du hier: Click!

Auf dieser Seite steht, dass man das Event beim IE mit dem "on" schreiben muss, also "onclick" anstatt nur "click"


PS: Ich würde den IE 6 nicht mehr unterstützen.


----------



## SAMariter (8. September 2010)

Hi.

Danke für die Antwort. Werde mal schauen ob mich das weiterbringt.

Den IE6 werde ich wohl noch unterstützen, weil mir der Mehraufwand an arbeit nicht so weh tut, wie enttäuschte Kunden.

Danke.

CU


----------



## SAMariter (9. September 2010)

So, nun muß ich nochmal nachfragen. Da ich wie gesagt den IE6 noch "halbherzig" unterstützen möchte, bräuchte ich jetzt eine Browserweiche (innerhalb von JS), die alle IE Versionen 6 und älter erkennt.

Habe im Internet schon eine ganze weile gesucht aber nichts gefunden.

@ComFreek: Ich habe das gerade mal ausprobiert mit dem add.EventListener. Aber das läuft irgendwie nicht. Oder liegt das daran, das das NUR im IE6 funktioniert? Ich habe es nämlich im IE7 Ausprobiert...


----------



## SAMariter (9. September 2010)

Also, ich habe jetzt lange mit mir gerungen und ein wenig im Internet rumgelesen. Somit bin auch ich zu dem entschluß gekommen, das der IE6 einfach schon zu alt ist, um noch unterstützt zu werden.

Damit sind die Fragen von vorher hinfällig. 

Danke trotzdem!!

CU SAM


----------



## ComFreek (9. September 2010)

Kannst du vielleicht den ganzen Code posten? Oder guck mal in die Fehlerkonsole des IE's.

Für die Browserweiche gibt es JS - navigator


----------



## SAMariter (10. September 2010)

Hallo ComFreek.

Also den ganzen Code willst du bestimmt nicht, das sind nämlich 670 Zeilen. Aber ich habe jezt mal den Block kopiert in dem der DOM-Eintrag erstellt wird.


```
for(f=0; f <= anzahl-1; f++) {
            if(result[f].parent_id == nummer) {
                var domdiv = document.getElementById("herstellerboxinhalt");
                //Marke einfügen
                var domeintrag = document.createElement("p");
                //Atribute anhängen
                var markeid = "marke";
                    markeid = markeid.concat(f);
                domeintrag.setAttribute("id", markeid);
                domeintrag.setAttribute("class", "marke");
                domeintrag.setAttribute("onclick", "herstellerauswaehlen('" + result[f].categories_id + "', '" + result[f].categories_name + "')");
                var domtext = document.createTextNode(result[f].categories_name);

                domeintrag.appendChild(domtext);
                domdiv.appendChild(domeintrag);
            }
        }
```

Die ID und die Class hatte ich schon abgeändert, habe ich aber mit der Entscheidung den IE6 nicht mehr zu unterstützen wieder auf setAttribute geändert.

CU SAM


----------



## ComFreek (10. September 2010)

Vielleicht solltest du die Attribute per document.createAttribute() erzeugen:

```
for(f=0; f <= anzahl-1; f++) {
            if(result[f].parent_id == nummer) {
                var domdiv = document.getElementById("herstellerboxinhalt");
                //Marke einfügen
                var domeintrag = document.createElement("p");
                //Atribute anhängen
                var markeid = document.createAttribute("id");
                markeid.nodeValue = "marke";
                domeintrag.setAttributeNode(markeid);

                var attrClass = document.createElement("class");
                attrClass.nodeValue = "marke";
                 domeintrag.setAttributeNode(attrClass);
     
                var attrOnClick = document.createElement("onclick");
                attrOnClick.nodeValue = "herstellerauswaehlen('" + result[f].categories_id + "', '" + result[f].categories_name + "')";
                 domeintrag.setAttributeNode(attrOnClick);


                var domtext = document.createTextNode(result[f].categories_name);
 
                domeintrag.appendChild(domtext);
                domdiv.appendChild(domeintrag);
            }
        }
```


----------



## Sven Mintel (10. September 2010)

Moin,

Folgendes sollte in allen Browsern problemlos funktionieren:

```
domeintrag.onclick=function(){herstellerauswaehlen(result[f].categories_id,result[f].categories_name);}
```


----------



## SAMariter (13. September 2010)

Also, vielen Dank für eure Antworten und die damit verbundene Mühe. Aber leider funktioniert kein Vorschlag...

Eigentlich schade, aber echt kein Problem. Wie gesagt, ich habe eh nicht vor den IE6 noch zu unterstützen. Und in allen anderen Browsern funktioniert das hervorragend.

CU SAM


----------



## Sven Mintel (13. September 2010)

SAMariter hat gesagt.:


> Also, vielen Dank für eure Antworten und die damit verbundene Mühe. Aber leider funktioniert kein Vorschlag...



Dann hast du zumindest meinen Vorschlag fehlerhaft umgesetzt, hier zum Testen, dass er funktioniert:

```
<body></body>
<script>

herstellerauswaehlen=function(a,b)
{
  alert(a+'\n'+b);
}

f=0;

result=[{categories_id:'Kategorie-ID#1',categories_name:'Kategorie-Name#1'}];


domeintrag=document.createElement('button');
domeintrag.setAttribute('type','button');
domeintrag.appendChild(document.createTextNode('Klick mich'));

document.getElementsByTagName('body')[0].appendChild(domeintrag);

domeintrag.onclick=function(){herstellerauswaehlen(result[f].categories_id,result[f].categories_name);}

</script>
```

Ausgabe beim Klick:

```
Kategorie-ID#1
Kategorie-Name#1
```


----------



## SAMariter (16. Oktober 2010)

Ihr könnt mich ja gerne für zu blöd halten. Ich meine ich Zweifle ja schon an mir selber... Aber das will einfach nicht klappen. Nun poste ich mal den "ganzen" Code. Mal schauen ob ihr da dann was rausfindet.


```
// Zubehör wurde ausgewählt
    function zubehoer(nummer, kategorie) {
        //Kategorie übernehmen - Hersteller-wählen schwarz einfärben - Modell-wählen grau einfärben
        document.getElementById("kategoriename").firstChild.nodeValue = kategorie;
        document.getElementById("kategorienamedetail").firstChild.nodeValue = "";
        document.getElementById("herstellermarke").firstChild.nodeValue = "-- Wählen Sie den Hersteller --";
        document.getElementById("herstellermarke").style.color = "#777777";
        document.getElementById("modellname").firstChild.nodeValue = "-- Wählen Sie das Modell --";
        document.getElementById("modellname").style.color = "#777777";
        kategorierolldown();
        //Zuerst die vorhandenen Gruppen entfernen
        var knoten = document.getElementById("div-baum").lastChild;
        var loeschen = document.getElementById("div-baum").removeChild(knoten);
        //Gruppenüberschrift eintragen
        var domdiv = document.getElementById("div-baum");
        var domeintrag = document.createElement("p");
        //Attribute anhängen
        domeintrag.setAttribute("id", "gruppenliste");
        domeintrag.setAttribute("class", "tuninggruppetitel");
        var domtext = document.createTextNode("Wählen Sie einen Bereich");
        domeintrag.appendChild(domtext);
        domdiv.appendChild(domeintrag);
        //Gruppen eintragen
        var result = eval(out);
        var anzahl = result.length;
        for(f=0; f <= anzahl-1; f++) {
            if(result[f].parent_id == nummer) {
                var domdiv = document.getElementById("gruppenliste");
                //DIV erzeugen
                var domeintragdiv = document.createElement("div");
                //Atribute anhängen
                var gruppeid = "gruppe";
                    gruppeid = gruppeid.concat(f);
                domeintragdiv.setAttribute("id", gruppeid);
                //Gruppe (Text) einfügen
                var domeintragtext = document.createElement("p");
                domeintragtext.id = roteschriftid;
//domeintragtext.setAttribute("id", roteschriftid);
                domeintragtext.className = "tuninggruppe";
//domeintragtext.setAttribute("class", "tuninggruppe");
                //domeintrag.onclick=function(){herstellerauswaehlen(result[f].categories_id,result[f].categories_name);};
                domeintragtext.onclick=function(){legende(result[f].categories_id, result[f].categories_name, gruppeid, roteschriftid);};
//domeintragtext.setAttribute("onclick", "legende(" + result[f].categories_id + ", '" + result[f].categories_name + "', '" + gruppeid + "', " + roteschriftid + ")");
                var domtext = document.createTextNode(result[f].categories_name);

                domeintragtext.appendChild(domtext);
                domeintragdiv.appendChild(domeintragtext);
                domdiv.appendChild(domeintragdiv);

                roteschriftid++;
            }
        }
        // Willkommenstext unsichtbar und Gruppen sichtbar
        document.getElementById("div-baum-willkommen").style.display = "none";
        document.getElementById("div-baum").style.visibility = "visible";
        // Rolldownmenü Hersteller und Modell sperren
        herstellerrolldownok = 0;
        modellrolldownok = 0;
        //iFrame entsprechend befüllen
        document.getElementById("tuningframe").setAttribute("src", "shop-blank-tuning.html");
    }

// Gruppe wurde ausgewählt
    function legende(nummer, kategorie, uebergruppe, rot) {
        // Übergeben welcher Eintrag rot werden soll
        roteschrift = rot;
        // Zähler wieder auf null setzen
        istinarray = 0;
        //wenn letzter Knoten ein DIV dann den DIV schließen ...
        if (document.getElementById(uebergruppe).lastChild.nodeName == "DIV") {
            var remove = document.getElementById(uebergruppe).lastChild;
            var weg = document.getElementById(uebergruppe).removeChild(remove);
        }
        //...sonst Untergruppen einfügen
        else {
            var result = eval(out);
            var anzahl = result.length;
            //Kontrollieren ob es noch eine weitere Untergruppe gibt
            for(d=0; d <= anzahl-1; d++) {
                if(arrayparentid[d] == nummer) {
                    istinarray++;
                }
            }

            if (istinarray == 0) {
                jsonprodukt(nummer, kategorie, roteschrift);
            }
            else {
                var domdiv = document.getElementById(uebergruppe);
                //DIV einfügen
                var domeintrag = document.createElement("div");
                //Atribute anhängen
                domeintrag.setAttribute("class", "untergruppediv");
                var gruppeid = uebergruppe.concat(nummer);
                domeintrag.setAttribute("id", gruppeid);

                domdiv.appendChild(domeintrag);

                //Untergruppe einfügen
                        var domdiv = document.getElementById(gruppeid);
                for(f=0; f <= anzahl-1; f++) {
                    if(result[f].parent_id == nummer) {
                        //DIV erzeugen
                        var domeintragdiv = document.createElement("div");
                        //Atribute anhängen
                        var gruppeid = uebergruppe.concat("x" + f);
                        domeintragdiv.setAttribute("id", gruppeid);
                        //Gruppe (Text) einfügen
                        var domeintragtext = document.createElement("p");
                        domeintragtext.setAttribute("id", roteschriftid);
                        domeintragtext.setAttribute("class", "untergruppe");
                        domeintragtext.setAttribute("onclick", "legende(" + result[f].categories_id + ", '" + result[f].categories_name + "', '" + gruppeid + "', " + roteschriftid + ")");
                        var domtext = document.createTextNode(result[f].categories_name);

                        domeintragtext.appendChild(domtext);
                        domeintragdiv.appendChild(domeintragtext);
                        domdiv.appendChild(domeintragdiv);

                        roteschriftid++;
                    }
                }
            }
        }
        //iFrame entsprechend befüllen
        document.getElementById("tuningframe").setAttribute("src", "shop-blank-tuning.html");

        // Kategorie rot einfärben und letzt wieder schwarz
        document.getElementById(roteschrift).style.color = "#CC3333";
        var istrot = roteschriftzuletzt;
        roteschriftzuletzt = roteschrift;
        document.getElementById(istrot).style.color = "#000000";
    }
```

Von Zeile 37 bis 43 habe ich den Code abgeändert. Das alte habe ich noch als kommentar stehen lassen. Das mit der ID unde der CLASS funktioniert so. Nur der ONCLICK will einfach nicht.

Danke nochmal.

CU


----------



## wollmaus (19. Oktober 2010)

Da ist viel code, und nicht alle nötigen Ressourcen sind ersichtlich(Markup, Funktionen). Unmöglich, so die Fehlerursache einzugrenzen. Es wäre besser, du stellst da ganze online, so wie es jetzt ist und nicht funktioniert.


----------



## SAMariter (19. Oktober 2010)

Hallo Wollmaus.

Also der oben stehende Code ist jetzt so wie er nicht funktioniert.

Zeile 37, 39, 42 sind die neuen, die in jedem Browser laufen sollen. Zeile 38, 40, 43 sind die alten. Die funktionieren, aber eben nicht im alten IE. Zeile 41 ist der "Vorschlag" von Sven.

Im speziellen geht es jetzt um Zeile 42. Der Rest funktioniert. Nur den OnClick setzt der nicht um.

Wenn das was hilft kann ich den aktuellen Code schon online stellen, aber ich denke nicht dass das was bringt. Weil die JS Datei alleine über 600 Zeilen hat.

Danke.

 CU


----------



## Quaese (19. Oktober 2010)

Hi,

das Problem liegt in der Laufvariablen *f* begründet. So wie dein Code derzeit angelegt ist, wird sie der Funktion *legend* mit dem zuletzt angenommen Wert (=anzahl) übergeben. Dort befindet sich allerdings kein Wert.

Um die Laufvariable mit ihrem jeweils aktuellen Wert an den click-Handler zu übergeben, kannst du jeweils ein neues *Function*-Objekt erstellen. Diesem übergibst du im zweiten Argument den Funktionsaufruf mit dem jeweils aktuellen Zustand der Variablen.

```
domeintragtext.onclick = new Function("fx", "legend('"+result[f].categories_id+"', '"+result[f].categories_name+"', '"+gruppeid+"', "+roteschriftid+")");
```

Ciao
Quaese


----------



## SAMariter (19. Oktober 2010)

Hallo.

Danke für die Antwort. Hier aber nun die schlechte Nachricht: Das will einfach nicht klappen. Ich habe nun auch mal im DOM-Inspektor vom Firefox geschaut. Da ist auch kein onClick event eingetragen. Das Problem scheint also zu sein, dass der Eventhandler nicht eingetragen wird. Oder liegt der Fehler bei mir. Funktioniert der Konstrukt nur in älteren IE's****

Danke.

CU


----------



## Quaese (19. Oktober 2010)

Hi,

bei mir funktioniert es tadellos:

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
roteschriftid = 0;
function clickTest(nummer){
  //Gruppen eintragen
  var result = [{categories_id:'Kategorie-ID#1',categories_name:'Kategorie-Name#1', parent_id: 1},
                {categories_id:'Kategorie-ID#2',categories_name:'Kategorie-Name#2', parent_id: 2}];
  var anzahl = result.length;
  for(f=0; f <= anzahl-1; f++) {
    if(result[f].parent_id == nummer) {
      var domdiv = document.getElementById("gruppenliste");
      //DIV erzeugen
      var domeintragdiv = document.createElement("div");
      //Atribute anhängen
      var gruppeid = "gruppe";
      gruppeid = gruppeid.concat(f);
      domeintragdiv.setAttribute("id", gruppeid);
      //Gruppe (Text) einfügen
      var domeintragtext = document.createElement("p");
      domeintragtext.id = roteschriftid;
      domeintragtext.className = "tuninggruppe";
      domeintragtext.onclick = new Function("fx", "legend('"+result[f].categories_id+"', '"+result[f].categories_name+"', '"+gruppeid+"', "+roteschriftid+")");
      var domtext = document.createTextNode(result[f].categories_name);

      domeintragtext.appendChild(domtext);
      domeintragdiv.appendChild(domeintragtext);
      domdiv.appendChild(domeintragdiv);

      roteschriftid++;
    }
  }
}

function legend(a, b, c, d){
  alert(a + "\n" + b + "\n" + c  + "\n" + d);
}
 //-->
</script>
</head>
<body>
<button onclick="clickTest(1);">clickTest 1</button>
<button onclick="clickTest(2);">clickTest 2</button>
<div id="gruppenliste"></div>
</body>
</html>
```
Ciao
Quaese


----------



## SAMariter (22. Oktober 2010)

Nun verstehe ich garnichts mehr. Wenn ich das beispiel von dir nehme, funktioniert alles optimal. Kopiere ich jedoch den Code in meinen, läuft wieder nichts mehr.

Woher kommt das "fx" aus der new Function?

CU


----------



## SpiceLab (22. Oktober 2010)

SAMariter hat gesagt.:


> Kopiere ich jedoch den Code in meinen, läuft wieder nichts mehr.


Um sich zu dem Sachverhalt näher äußern zu können, ist schon ein Einblick in die derzeit vollständige Fassung deines Codes vonnöten.


----------



## SAMariter (22. Oktober 2010)

Vorab erstmal VIELEN DANK für deine geduldige Hilfe!

Ich habe nun den fehler gefunden! Jetzt läuft es tadellos in allen getesteten Browsern. 

Der fehler war eigentlich recht simpel. (Wie meistens eben). Es lag an einem einfachen "e".

Bei mir heißt die function "legende", du hast die in "legend" umgetauft. Da ich den Code immer nur kopiert habe, konnte das nicht klappen.

Wie gesagt. Nun tuts. Danke dir/euch. 

CU


----------

