Funktion führt sich automatisch aus bei Änderung von "onclick"

[Alarska]

Hi,

ich möchte das onclick Ereignis von Objekten zu ändern, wenn ich auf einen bestimmten Link klicke. Dabei funktioniert das hier perfekt:

  
function Change(id)  
     {  
 document.getElementById("content"+id).onclick = DoThis;  
     }  
  
function DoThis()  
{  
 alert('flash');  
}  

Wenn ich aber versuche, einen Parameter zu übergeben, dann wird das onclick Ereignis nicht geändert, statdessen wird "DoThis" immer direkt ausgeführt:

  
function Change(id)  
     {  
 document.getElementById("content"+id).onclick = DoThis(id);  
     }  
  
function DoThis(id)  
{  
 alert(id);  
}  

Was mache ich falsch?? Die onclick Ereignisse (es werden mehrere gleichzeitig geändert) brauchen unbedingt Parameter...

Danke!

______________
P.S.: Komme erst morgen nochmal ins Internet, bin heute leider nicht mehr da! Freue mich aber trotzdem auf Antworten..

[LX]

Hallo!

DoThis(xy) führt DoThis mit dem Parameter xy aus. Was Du brauchst, ist eine sogenannte Closure: kapsele DoThis(xy) in eine weitere Funktion:

document.getElementById("content"+id).onclick = function(id) { DoThis(id); }

Gruß, LX

[Alarska]

Hi, bin doch nochmal kurz online. Also das hilft:

document.getElementById("content"+id).onclick = function(id) { DoThis(id); }

..aber: ich bekomme jetzt immer die Nachricht "[object MouseEvent]", wenn ich klicke, statt dass die id ausgegeben wird (z.B. 2), die ich der Funktion "Change(id)" mitgegeben hatte...

Mein momentaner Code:

  
function Change(id)  
 {  
  document.getElementById("content"+id).onclick = function(id) { DoThis(id); }  
 }  
  
function DoThis(id)  
{  
 alert(id);  
}  

[Alarska]

Ok, habs selber raus. So klappts:

~~~javascript

function Change(id1)
  {
   document.getElementById("content"+id1).onclick = function(id) { alert(id1); }
  }

  
Ist das auch korrekt, so dass ich davon ausgehen kann, dass es mit alle Browsern läuft? 

[Kai345]

[latex]Mae  govannen![/latex]

function Change(id1)
  {
   document.getElementById("content"+id1).onclick = function(id) {}
  }

>   
> Ist das auch korrekt, so dass ich davon ausgehen kann, dass es mit alle Browsern läuft?  
  
Es sollte funktionieren, ist allerdings sehr ungünstig benannt. Du wirst, wenn du den Code in ein paar Monaten anschaust, rätseln, was id bedeuten soll, von anderen Personen mal ganz abgesehen.  
  
Wenn du schreibst  
  
~~~javascript
  
function change(id) {  
  document.getElementById("content"+id).onclick = function(parameter1) {alert(parameter1);}  

dann wird - wie du schon früher in der Praxis festgestellt hast - in „parameter1“ immer das Event-Objekt übergeben (allerdings nicht bei allen Browsern), daher solltest du - je nachdem, ob du das Event-Objekt für deine Funktion benötigst oder nicht, entweder
keinen oder einen entsprechend benannten Parameternamen benutzen. „id“ wäre hier falsch und verwirrend, da an dieser Stelle nie eine id übergeben werden kann.

Besser wäre z.B.

  
//Event-Objekt wird nicht benötigt (wie bei deiner Funktion)  
function change(id) {  
  document.getElementById("content"+id).onclick = function() {}  
}  
  
//Event-Objekt wird benötigt  
function change(id) {  
  document.getElementById("content"+id).onclick = function(e) {}  
} // e für das Event-Objekt zu benutzen hat sich eingebürgert  
  
//Event-Objekt wird benötigt  
function change(id) {  
  document.getElementById("content"+id).onclick = function(evnt) {}  
}

oder ähnliche Namen, die auf das übergebende Event-Objekt hindeuten.

Wie du siehst, habe ich außerdem change geschrieben statt Change, da es üblich ist, nur Konstruktoren mit einem Großbuchstaben beginnen zu lassen.

Außerdem sollte der Funktionsname auch aussagekräftiger sein. change .. hmm… ja was denn? Geht nicht hervor. Was machst du, wenn du anderswo auch etwas ändern willst? change1 change2 ...

changeElementColor oder changeElementSize wären sinnvollere Namen, wenn man z.B. Farbe oder Größe von einem Element ändern möchte.

Nichts von dem geschriebenen ist ein programmiertechnisches Muss, es wird auch weiterhin wie von dir geschrieben funktionieren, allerdings sollte man sich gewisse Konventionen aneignen

Cü,

Kai

[Alarska]

Ok, danke! Das mit den Eventhandlern werd ich mir merken! Die Funktion habe ich nur hier so genannt, in meinem Script heißt sie anders...

[molily]

document.getElementById("content"+id).onclick = function(id) { DoThis(id); }

Die Funktion nimmt das Event-Objekt entgegen, nicht die ID, und sollte id nicht als lokale Variable überschreiben. Also function () {...} ohne id in der Parameterliste. Dann klappts auch mit dem Zugriff auf id in der Funktion.

Mathias

[Struppi]

Das hier ...

document.getElementById("content"+id).onclick = DoThis;

... und das hier ...

document.getElementById("content"+id).onclick = DoThis(id);

... sind zwei völlig unterschiedliche Dinge.

Im ersten Fall wird die Referenz auf die Funktion an den Handler übergeben, im zweiten wird der Rückgabewert des Aufrufs an den Handler übergeben.

D.h. im ersten Fall wird die Funktion beim klicken aufgerufen. Im zweiten Fall wird sie direkt aufgerufen und beim klicken passiert nichts, weil die Funktion keine Referenz als Rückgabewert zurück gibt.

Struppi.

[molily]

document.getElementById("content"+id).onclick = DoThis(id);

Siehe http://redaktion.selfhtml.org/selfhtml-preview/javascript/einbindung.html#fehler-handler-aufrufen

Mathias