onclick und Instanz

[strauberry]

Hallo zusammen,

in meiner JS-Klasse erzeuge ich einen neuen Link mittels document.createElement('a'). Diesem Link möchte ich ein onclick zuweisen und zwar auf eine Funktion aus meiner JS-Klasse.

Hab bisher folgendes probiert:

function A() {
cancelLink.onclick = this.cancelEditingNumber.apply(this);
}
this.cancelEditingNumber = function() {
this.currentEditedContainer.innerHTML = this.lastEditedNumber;
} 

Funktioniert nicht, weil mit dem apply das ja direkt aufgerufen wird. ein onclick=func(param) geht ja auch nicht, weil params nicht übergeben werden können.
Dann hab ich mal das bind aus prototype angeschaut und das hier gemacht:

cancelLink.onclick = function() {return this.cancelEditingNumber.apply(this);} 

Da bekomme ich dann this.cancelEditingNumber has no properties. Gleiches bei

cancelLink.onclick = function() {return cEN.apply(this);}
function cEN(inst) {
    inst.cancelEditingNumber();
} 

Langsam fallen mir keine Möglichkeiten mehr ein :-)

DANKE!!

[Kropff]

kannst du mal den kompletten code dazu posten?

peter

[strauberry]

function cEN() {
    this.cancelEditingNumber();
}

function Editor() {

    this.editNumber = function(uniqueID, number) {

        currentEditedContainer = document.getElementById('edit-' + uniqueID);
        
        // create cancel button
        var cancelLink = document.createElement('a');
        cancelLink.href = 'javascript:void(0);';
        cancelLink.innerHTML = 'Abbrechen';
        cancelLink.onclick = function() {return cEN.apply(this);}
        currentEditedContainer.appendChild(cancelLink);
    
    }
    
    this.hideEditing = function() {
    }
    
    this.cancelEditingNumber = function() {
    
        // remove all select boxes
        
        // remove buttons
        
        // write old value
    }
} 

[Kropff]

du kannst hier nicht einfach auf die methode eines objektes zugreifen.

function cEN() {
    this.cancelEditingNumber();
} 

du musst zuerst eine referenz auf das objekt erzeugen.

function cEN() {
   var obj = new Editor();
    obj.cancelEditingNumber();
} 

so in der art.

peter

[strauberry]

Hm, in der Doku von "apply()" hatte ich das so verstanden, dass ich damit das this zuweisen kann. Das Problem ist, dass ich keine neue Instanz erzeugen kann, weil ich auf Instanzvariablen zugreifen muss.. Und der gepostete Code ist ja nur der Rahmen für die verschiedenen Möglichkeiten aus meinem ersten Post :-) Die funzen ja alle nicht

[Kropff]

habe mich ehrlich gesagt, noch nie mit apply beschäftigt. allerdings hast du da imho einen konstruktionsfehler in deinem script. du hast ein objekt mit mehreren methoden:

this.editNumber
this.hideEditing
this.cancelEditingNumber 

jetzt greifst du innerhalb dieses objektes auf eine äußere funktion zu, die wiederum eine methode deines objektes aufruft. warum dieser umweg? du kannst doch hier direkt auf die methode zugreifen:

cancelLink.onclick = function() 
{
   // hier auf this.cancelEditingNumber zugreifen
} 

peter

[pekka]

Ich mag die Event-Funktionen von prototype (www.prototypejs.org) sehr, vor allem, weil die bestehende onClick-Definitionen stehenlassen und dort definierte Events einfach obendrauf gereiht werden.

Aber xyz.onclick ist für den hier genannten Zweck natürlich völlig ausreichend.

[strauberry]

Hi,

danke für eure Antworten. prototype möchte ich nicht verwenden, weil es ziemlich viel Daten wären, nur um das onlick Zeug verwenden zu können :-) Außerdem muss das ja auch so gehen.

@Kropff: geht leider nicht:

cancelLink.onclick = function() {this.cancelEditingNumber();}; 

Bringt mir JS-Fehler "this.cancelEditingNumber is not a function"

[pekka]

Benutzt Du denn "new"?

[strauberry]

Hinter der letzten } der Klasse steht

var handyEditor = new HandyEditor(); 

[Kropff]

Benutzt Du denn "new"?

braucht er doch nicht. allerdings ist da ein semikolon zuviel:

cancelLink.onclick = function() 
{
  this.cancelEditingNumber();
}; 

eigentlich sollte das so funktionieren. stell doch ein beispiel online.

EDIT:

---

Original geschrieben von strauberry
Hinter der letzten } der Klasse steht

var handyEditor = new HandyEditor(); 

jetzt zeig mal den kompletten code.

---

peter

[strauberry]

function HandyEditor() {

    this.serviceNumbers = new Array(151, 152, 157, 159, 160, 162, 163, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179);

    this.editNumber = function(uniqueID, number) {
    
        var currentEditedContainer = document.getElementById('editHandy-' + uniqueID);
        
        // split up number and save it
        numberParts = number.split("-");
        if(numberParts.length != 3) {
            numberParts[0] = '0049';
            numberParts[1] = this.serviceNumbers[0];
            numberParts[2] = '';
        }
        
        // get link element
        var editLink = currentEditedContainer.getElementsByTagName('a')[0];
        
        // save last edited number for cancel
        this.lastEditedNumber = editLink;
    
        // remove shown number
        currentEditedContainer.removeChild(editLink);
        
        // create selectbox for country
        var countrySelect = document.createElement('select');
        countrySelect.className = 'text countryNo';
        
        var countryOption = document.createElement('option');
        countryOption.value = "0049";
        countryOption.text = "0049";
        countryOption.selected = 'selected';
        countrySelect.options[0] = countryOption;
        
        // create selectbox for service
        var serviceSelect = document.createElement('select');
        serviceSelect.className = 'text serviceNo';
        
        for(i = 0; i < this.serviceNumbers.length; i++) {
            tmp = document.createElement('option');
            tmp.text = this.serviceNumbers[i];
            tmp.value = this.serviceNumbers[i];
            serviceSelect.options[i] = tmp;
        }
        
        // create input for number
        var numberInput = document.createElement('input');
        numberInput.className = 'text numberInput';
        
        countrySelect.id = 'countrySelect_' + uniqueID;
        currentEditedContainer.appendChild(countrySelect);
        
        // create selectbox with first part
        serviceSelect.id = 'serviceSelect_' + uniqueID;
        serviceSelect.value = numberParts[1];
        currentEditedContainer.appendChild(serviceSelect);
        
        numberInput.value = numberParts[2];
        numberInput.id = 'numberInput_' + uniqueID;
        currentEditedContainer.appendChild(numberInput);
        
        // create cancel button
        var cancelLink = document.createElement('a');
        cancelLink.href = '#';
        cancelLink.innerHTML = 'Abbrechen';
        cancelLink.setAttribute('onclick', 'handyEditor.cancelEditingNumber(); return false;');
        currentEditedContainer.appendChild(cancelLink);
    
    }
    
    this.hideEditing = function() {
    }
    
    this.cancelEditingNumber = function() {
    
        var currentEditedContainer = document.getElementById('editHandy-' + uniqueID);
    
        // remove all select boxes
        var selBoxes = this.currentEditedContainer.getElementsByTagName('select');
        
        // remove buttons
        
        // write old value
        this.currentEditedContainer.appendChild(this.lastEditedNumber);
    
    }

}

var handyEditor = new HandyEditor(); 

Hab das mit dem onclick jetzt über die setAttribute Methode gelöst. Gefällt mir nicht ganz so, aber hauptsache, es funzt erstmal. Optimieren kann ich immer noch :-)

[Kropff]

Hab das mit dem onclick jetzt über die setAttribute Methode gelöst

auch mal im ie getestet?

peter

[strauberry]

Fuck ne :-) Deiner Frage nach will ich das jetzt aber auch nicht mehr

[Kropff]

mach es mal

peter