onclick in DOM eintragen

SAMariter hat gesagt.:
Also, vielen Dank für eure Antworten und die damit verbundene Mühe. Aber leider funktioniert kein Vorschlag...
Zum Vergrößern anklicken....

Dann hast du zumindest meinen Vorschlag fehlerhaft umgesetzt, hier zum Testen, dass er funktioniert:
Code: 
<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:
Code: 
Kategorie-ID#1
Kategorie-Name#1
 
Zuletzt bearbeitet:
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.

Code: 
// 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
 
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.
 
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
 
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.
Code: 
domeintragtext.onclick = new Function("fx", "legend('"+result[f].categories_id+"', '"+result[f].categories_name+"', '"+gruppeid+"', "+roteschriftid+")");

Ciao
Quaese
 
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
 
Hi,

bei mir funktioniert es tadellos:
Code: 
<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
 
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
 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück