[JS] "samengestelde" onclick i.c.m. createElement

[Verwijderd]

In navolging van mijn eerdere topic over prototyping (ik snap het nu ) het volgende. Ik heb deze code:

code:

function MozDatePicker( _htmlElement ) {
    this.htmlElement = _htmlElement;
    this.writeDatePicker();
}

MozDatePicker.prototype = {
    writeDatePicker:function() {
        var x = document.createElement( 'img' );
        x.setAttribute( 'src' , 'img/datepicker.gif' );
        x.onclick = new Function( this.htmlElement + '.popUp()' );
        document.body.appendChild( x );
    },
    popUp:function() {
        alert( 'blaat' );
    }
}

Wat de bedoeling is: ik maak ergens in de pagina een "datePicker1 = new MozDatePicker( 'datePicker1' );". Deze zet een plaatje neer ("writeDatePicker()") wat als erop geklikt wordt de functie popUp() uit zou moeten voeren. Hij moet dan dus "datePicker1.popUp()" uitvoeren, vandaar "this.htmlElement + '.popUp()'" in de code.

Dit werkt prima in Firefox, maar wil voor geen meter in IE, wat ik ook probeer. Het gaat in zoverre goed dat 'ie de onclick wel goed zet; als ik er "x.onclick = new Function( 'alert(\'blaat\')' );" van maak geeft 'ie gewoon een alert, maar de "samengestelde" functie heeft er dus geen zin in.

Wat ik wil moet kunnen zou je denken, aangezien het in Firefox prima werkt. In principe kan ik geen andere manier vinden om dit te bereiken dan zo, want het geheel moet wel dynamisch zijn enzo uiteraard.

[ Voor 44% gewijzigd door Verwijderd op 14-04-2005 19:08 ]

[Amras]

Dat komt omdat je nu .popUp() roept tegen het htmlElement attribuut van een MozDatePicker object ipv tegen het object zelf. In de onclick methode zul je dus een referentie naar het juiste object moeten zien te krijgen en daar .popUp() tegen roepen (note dat this in de onclick functie niet naar het MozDatePicker object wijst, maar naar het html element waar je op klikt). Je zou het als volgt op kunnen lossen:

JavaScript:

var datePickers = new Array();

function MozDatePicker( _htmlElement ) {
    this.htmlElement = _htmlElement;
    datePickers[_htmlElement] = this;

    this.writeDatePicker();
}

MozDatePicker.prototype = {
    writeDatePicker:function() {
        var x = document.createElement( 'img' );
        x.setAttribute( 'src' , 'img/datepicker.gif' );

        var id = this.htmlElement;
        x.onclick = function()
        {
            datePickers[id].popUp();
        }

        document.body.appendChild( x );
    },
    popUp:function() {
        alert( 'blaat' );
    }
}

Alle dataPickers worden nu in een array opgeslagen, en kunnen opgehaald worden met hun id (uniek id naar html element).

Zo krijg ik in zowel IE als FF netjes "blaat" op mn scherm.

[Clay]

Doe de onclick bv zo:

code:

var self = this;
x.onclick = function() {
   self.popUp();
}

In de onclick handler verwijst "this" helaas naar window, maar door de scope te "vangen" en die zo te gebruiken binnen die inline handler (closure) kan je er toch bijkomen. Dan heb je this.htmlElement ook niet meer nodig. Oo wordt namelijk weer stukken leuker als je niet met bergen variabelenamen of arrays met pointers hoeft te werken

[edit]

@Amras; dat kan idd ook. Maar dan heb je dus wel die globale array. Is maar net wat je wil.

[ Voor 14% gewijzigd door Clay op 14-04-2005 19:31 ]

[Amras]

Clay schreef op donderdag 14 april 2005 @ 19:29:
Doe de onclick bv zo:

code:

var self = this;
x.onclick = function() {
   self.popUp();
}

In de onclick handler verwijst "this" helaas naar window, maar door de scope te "vangen" en die zo te gebruiken binnen die inline handler (closure) kan je er toch bijkomen. Dan heb je this.htmlElement ook niet meer nodig. Oo wordt namelijk weer stukken leuker als je niet met bergen variabelenamen of arrays met pointers hoeft te werken

[edit]

@Amras; dat kan idd ook. Maar dan heb je dus wel die globale array. Is maar net wat je wil.

Ow, das ook een nette.

Ik doe eigenlijk precies hetzelfde alleen dan met het id en heb dus een extra array nodig. Ach ja, kan de TS kiezen.

[Verwijderd]

Ik denk dat ik voor optie twee ga (beide bedankt voor de moeite), al moet ik alles eerst nog eens goed doorlezen. Ik ben alles behalve een goeroe op dit gebied en wil wel graag weten wat ik doe voordat ik ga copy/pasten.