Invocare metodo onclick all'interno della stessa implementazione dell'oggetto

[geggiamarti]

Ciao a tutti, premetto che sono nuova in javascript... sto cercando di usare js ad oggetti, ed ho capito che è piuttosto diverso dagli altri linguaggi OOP. Questa è l'implementazione del mio oggetto:

function tabella(){
        var ultimo=0;
        var idmeno="meno"+ultimo;
        
        this.tabella=document.createElement('table');
        
        this.riga=[];
        
        this.rigatitolo=document.createElement('tr');
        this.coltitolo=document.createElement('td');
        this.coltitolo.setAttribute('colspan',3);
        
        this.riga[ultimo]=document.createElement('tr');
        this.colspec=document.createElement('td');
        this.colval=document.createElement('td');
        this.colpiu=document.createElement('td');
        
        this.titolo=document.createElement('input');
        this.titolo.setAttribute('type','text');
        this.titolo.setAttribute('class','titolo');
        
        this.specifica=document.createElement('input');
        this.specifica.setAttribute('type','text');
        this.specifica.setAttribute('class','specifica');
        
        this.valore=document.createElement('input');
        this.valore.setAttribute('type','text');
        this.valore.setAttribute('class','valore');
        
        this.piu=document.createElement('div');
        this.piu.setAttribute('class','piu');
        this.piu.setAttribute('onclick',"this.aggiungispecifica()");
        this.piu.innerHTML="+";
        
        this.meno=document.createElement('div');
        this.meno.setAttribute('onclick','this.rimuovispecifica()');
        this.meno.setAttribute('class','meno');
        this.meno.innerHTML="-";
        this.meno.setAttribute('id',idmeno);
        
        this.creatabella=function ()
        {
            document.getElementById('contenitore').appendChild(this.tabella);
            this.tabella.appendChild(this.rigatitolo);
            this.rigatitolo.appendChild(this.coltitolo);
            this.coltitolo.appendChild(this.titolo);
            
            this.tabella.appendChild(this.riga[0]);
            this.riga[0].appendChild(this.colspec);
            this.riga[0].appendChild(this.colval);
            this.riga[0].appendChild(this.colpiu);
            
            this.colspec.appendChild(this.specifica);
            this.colval.appendChild(this.valore);
            this.colpiu.appendChild(this.piu);
            
            ultimo++;
        }
        
        this.aggiungispecifica=function()
        {
            alert("ciao");
        }
    }

E questa è la funzione dove creo l'oggetto che richiamo onload del body:

function setta()
    {
        var tab=[];
        
        tab[0]=new tabella();
        tab[0].creatabella();
    }

Questo è l'output:

esempio.jpg

Il problema: quando clicco il '+' dovrebbe invocare il metodo aggiungispecifica(), ma semplicemente non lo fa. Creando invece una funzione al di fuori dell'oggetto funziona. Qualcuno sa dirmi dove ho sbagliato? Grazie in anticipo

[KillerWorm]

Ciao, il problema sta sostanzialmente in questa riga:

this.piu.setAttribute('onclick',"this.aggiungispecifica()");

Cerco di spiegarti il problema e ti indico una soluzione.

In questo caso verrà creato, nel DOM, il div a cui attribuisci l'evento onclick, applicandolo come attributo al div stesso.
Il risultato HTML sarà una cosa del genere:

<div onclick="this.aggiungispecifica()" class="piu">+</div>

Ora la domanda è: "a cosa fa riferimento quell'istruzione this?"

Da come hai impostato la cosa, sembra che ti aspetti faccia riferimento al tuo oggetto tabella, ma non è così.
Dal momento che lo stai scrivendo direttamente nell'evento applicato come attributo sul div, il this farà riferimento esattamente a quell'elemento div del DOM, in cui, chiaramente, non sarà trovata alcuna funzione aggiungispecifica().

Puoi risolvere applicando l'evento onclick, non come attributo del DOM attraverso il metodo setAttribute(), ma direttamente con la sintassi JavaScript sull'oggetto che si riferisce a quel div, in questo modo:

this.piu.onclick = this.aggiungispecifica;

Fai attenzione però, in questo caso ci sarebbe un ulteriore problema. Questa riga è scritta (e quindi viene eseguita) prima della dichiarazione del metodo this.aggiungispecifica, che invece sta in fondo al tuo oggetto tabella. Questo significa che tale metodo non esiste nel momento in cui è eseguita l'assegnazione dell'evento, per cui si otterrà un errore. In questo caso basterebbe spostare in alto la dichiarazione di tale metodo.

Ad ogni modo ti consiglierei un diverso approccio. Ti spiego.
Lavorando con gli oggetti, in JavaScript, è possibile differenziare i membri di un oggetto, in "pubblici" (cioè accessibili anche dall'esterno) e "privati" (cioè visibili ed accessibili solo dall'interno dell'oggetto/costruttore stesso). In sostanza si usa il this per dichiarare i membri pubblici e l'istruzione var (o function) per dichiarare quelli privati. Per ora prendi per buono questo e, nel caso, fai qualche ricerca se ti serve approfondire su tale argomento.

Ora, dal momento che aggiungispecifica, da quello che mi sembra di capire, è un metodo privato (per cui non serve che sia accessibile dall'esterno), è sufficiente dichiararlo con function, in questo modo:

function aggiungispecifica(){
    alert("ciao");
}

In tal caso, tale dichiarazione, potrà essere posta in qualsiasi punto (all'interno del costruttore tabella) sia alla fine che all'inizio, che sarà comunque vista da qualsiasi punto all'interno del costruttore stesso. In conclusione potrai applicare l'evento onclick in questo modo (senza il this prima del nome funzione):

this.piu.onclick = aggiungispecifica;

Chiaramente lo stesso discorso andrebbe applicato anche per rimuovispecifica.

[geggiamarti]

ciao e grazie davvero della risposta! Dopo un po' ci sono arrivata da sola a questa conclusione, per cui ho deciso di cambiare un po' il codice e, ovviamente, sto avendo altri problemi. In pratica sto cercando di creare una tabella 'dinamica': nella colonna di intestazione c'è una input che fa da titolo, e sotto altre due colonne. Queste ultime devono poter essere eliminate e aggiunte... e devo aver la possibilità di creare anche più tabelle... Questo è il mio oggetto:

function tabella()
    {
        this.tabell=document.createElement('table');


        this.rigatitolo=document.createElement('tr');
        this.coltitolo=document.createElement('td');
        this.coltitolo.setAttribute('colspan',3);
        
        this.titolo=document.createElement('input');
        this.titolo.setAttribute('type','text');
        this.titolo.setAttribute('class','titolo');
        
        this.creatabella=function ()
        {
            document.getElementById('contenitore').appendChild(this.tabell);
            this.tabell.appendChild(this.rigatitolo);
            this.rigatitolo.appendChild(this.coltitolo);
            this.coltitolo.appendChild(this.titolo);
            
            this.aggiungiriga(0);
        }
        
        this.aggiungiriga=function(index)
        {
            this.riga=[];
            this.riga[index]=document.createElement('tr');
            var colspec=document.createElement('td');
            var colval=document.createElement('td');
            
            var specifica=document.createElement('input');
            specifica.setAttribute('type','text');
            specifica.setAttribute('class','specifica');
            
            var valore=document.createElement('input');
            valore.setAttribute('type','text');
            valore.setAttribute('class','valore');
            
            this.tabell.appendChild(this.riga[index]);
            this.riga[index].appendChild(colspec);
            this.riga[index].appendChild(colval);
            
            colspec.appendChild(specifica);
            colval.appendChild(valore);
        }
        
        this.rimuoviriga=function(index)
        {
            this.tabell.removeChild(this.riga[index]);
            this.riga.splice(index, 1);
        }
    }

E questa è la funzione dove lo creo:

function setta()
    {
        var ultimi=1;
        var meno=[];
                
        var tab=new tabella();
        tab.creatabella();
        
        meno[0]=document.createElement('div');
        meno[0].setAttribute('class','meno');
        meno[0].innerHTML="-";
                
        document.getElementById('colonnameno').appendChild(meno[0]);
        
        var piu=document.createElement('div');
        piu.setAttribute('class','piu');
        piu.innerHTML="+";
        document.getElementById('contenitore').appendChild(piu);
        
        piu.onclick=function(e)
        {
            tab.aggiungiriga(ultimi);
            meno[ultimi]=document.createElement('div');
            meno[ultimi].setAttribute('class','meno');
            meno[ultimi].innerHTML="-";
            
            document.getElementById('colonnameno').appendChild(meno[ultimi]);
            ultimi++;
        }
        
        var i=0;
        
        while(i<=ultimi)
        {
            meno[i].onclick=function(e)
            {
                tab.rimuoviriga(i);
                meno.splice(i, 1);
                ultimi--;
            }
            i++;
        }
    }

In pratica ho deciso di mettere 'piu' e 'meno' al di fuori dell'oggetto, e richiamare i metodi aggiungiriga() e rimuoviriga() a loro click. Il problema ora è sulla rimozione della riga...
Funziona solo per la prima riga... Ti ringrazio davvero moltissimo per il tempo che mi hai dedicato...

[KillerWorm]

Bene.

Occhio però a non divagare dall'argomento in discussione. Quello che indichi ora, è un altro problema. Hai già aperto altre discussioni con diverse richieste sempre inerenti questo progetto, e personalmente mi viene difficile cercare di collegare il tutto. Nel caso cerca di proseguire con un'unica discussione, altrimenti diventa problematico aiutarti.

In pratica ho deciso di mettere 'piu' e 'meno' al di fuori dell'oggetto

Perché hai optato per questa scelta?

Ho provato lo script del tuo ultimo post ma non viene trovato l'elemento "colonnameno". Cosa è e dove viene creato?

Trovo, il tutto, un po' macchinoso. Personalmente riprenderei un po' tutto dall'inizio, cercando di definire meglio una traccia da seguire per lo sviluppo.
Purtroppo non riesco a capire il contesto di utilizzo di questa roba, per cui non saprei come meglio consigliarti.

Se tu gradisci, potremmo riprendere dall'inizio così da procedere in maniera più lineare. Nel caso dovresti fornire qualche indicazione più precisa: contesto di utilizzo e caratteristiche varie dell'oggetto finale.