verschachtelte Funktionen, schleifen, Parameterübergabe

Back2toxic

Erfahrenes Mitglied
Hallo Tutorianer!

was ich versuche ist im Prinzip folgendes:
Ich erstelle in einer Funktion eine Tabelle und weise jeder TD ein onclick-Event zu.
Ist ja auch eigentlich nicht wirklich knifflig, ich möchte das ganze aber gerne in etwa so lösen:

Javascript:
function a(){
  this.b = function(x){
    alert(x);
  },
  // Tabelle erstellen und allen TD's ein onclick-Event zuweisen
  // Der Einfachheit wegen hier mit Divs, bleibt sich ja gleich
  this.getRandHex = function(from,upTo){
    from = (from) ? from : 120;  
    upTo = (upTo) ? upTo : 120;  
    var dec = Math.random()*upTo+from;
    return parseInt(dec, 10).toString(16);
  },
  this.c = function(){
    for(var i = 0; i<10; i++){
      var div = document.createElement("div");
      div.style.height = "50px";
      div.style.width = "500px";
      div.style.backgroundColor= "#"+this.getRandHex()+this.getRandHex()+this.getRandHex();
      document.getElementsByTagName('body')[0].appendChild(div);
      div.onclick = function(i){
        this.b(i);
      }
    }
  }
}
var x = new a();
x.c();

Mein Problem bezieht sich auf div.onclick = function {...}
Hier heißt es "this.b(i) is not a function", was ja in dem Fall auch korrekt ist.
Probiert habe ich auch folgendes, allerdings ohne Erfolg:
Javascript:
      div.onclick = this.b(i);
      div.setAttribute("onclick","this.b("+i+")");

Hat hier einer einen Hinweis für mich?
 
Zuletzt bearbeitet von einem Moderator:
Wenn überhaupt müsste es heißen
Javascript:
div.onclick = this.b;
denn du willst ja nicht den Rückgabewert zuweisen, sondern die Funktion.

Aber die Lösung deines Problems ist generell folgende. Du musst dir "this" merken, weil du möchtest dich ja auf die Instanz beziehen und nicht auf das DOM-Element.

Javascript:
function a(){
    var _this = this;
    //Jetzt kannst du innerhalb von Funktionen mit _this arbeiten.
    div.onclick = function(){
	_this.b(i);
    }
}

Wenn du mal folgendes machst, siehst du auch, was vorher schief lief:
Javascript:
div.onclick = function(i){
	alert(this.toString());
}
 
Zurück