[Javascript] Funzione JS con parametro

[Laskot]

Ciao a tutti,
spero di spiegare decentemente qual è il mio problema.
In pratica ho una pagina HTML con un elenco di birrerie che prendo da un file JSON che ho salvato nel local storage.
Ogni birreria è contenuta in un div, tramite il for con cui ho creato i div ho associato un id a ciascun div e per ogni div ho creato un bottone che 'pigiato' dovrebbe far comparire informazioni aggiuntive di quella specifica birreria.

Il bottone:

            var btn = document.createElement('button');
            result.appendChild(btn);
            var textbtn = document.createTextNode('Info menu');
            btn.appendChild(textbtn);
            btn.className = "buttonmenu";
            btn.setAttribute('onclick', 'infomenu(id)');

Vorrei fare in modo che quando onclick del bottone venga richiamata la funzione infomenu(id) dove l'id dovrebbe essere quello del div contenente il bottone.

Ho provato a buttare giù una bozza di funzione, ma il problema principale è che non so come passargli come parametro l'id specifico del div che contiene la birreria della quale vorrei avere più informazioni.
Scusate la spiegazione un po' vaga

 

[WmbertSea]

Ciao, in sostanza dovresti riferirti in maniera relativa a qella variabile sapendo che appartiene all'elemento genitore di tale bottone. Non ho provato ma credo che si possa risolvere con parentNode o qualcosa di simile.

Una cosa del tipo (tra queste):

infomenu(parentNode.id)
infomenu(parentElement.id)
infomenu(this.parentNode.id)

 

[Laskot]

Ciao,
grazie per la risposta.
In realtà non sono parenti i nodi credo.
Nel senso, erano due funzioni diverse e a me serviva richiamarne una nell'altra.
Alla fine ce l'ho fatta, nella funzione in cui ho creato il bottone btn ho scritto questo

btn.setAttribute('onclick', "infomenu('"+index+"')");

e l'altra mia funzione si chiamava infomenu (id). Il mio problema era che non riuscivo a collegare le due: scrivevo nella prima infomenu (index) ma mi diceva che index non era definito, non ho idea del perchè scrivendo invece '" +index+ "' mi funzioni. Non ne ho veramente la più pallida idea.

 

[WmbertSea]

In realtà non sono parenti i nodi credo.

Avevo capito che i pulsanti stavano dentro i rispettivi div; evidentemente ho inteso male.

È giusta la tua soluzione. Nel tuo codice iniziale, essendo incompleto, non era possibile capire se fosse presente una qualche variabile che restituisse il valore dell'id come tu hai poi fatto (usando la variabile index).

scrivevo nella prima infomenu (index) ma mi diceva che index non era definito, non ho idea del perchè scrivendo invece '"+index+ "' mi funzioni. Non ne ho veramente la più pallida idea.

È un po' lungo da spiegare e non è così intuitivo da capire. Con setAttribute tu stai dicendo di impostare un attributo direttamente sul tag HTML, per farlo devi passargli un valore, ad esempio una stringa testuale. Nel tuo caso l'attributo è onclick che di per sé non è una funzione JavaScript ma è un evento HTML definito, appunto, come attributo di quell'elemento HTML. Ora in questo evento tu puoi inserire un codice JavaScript, ma dovrai necessariamente definirlo come stringa testuale. Nel tuo caso, tale codice è il richiamo di una funzione a cui devi passare esattamente il valore della tua variabile index, e non il suo nome; questo perché l'interprete, una volta lanciata la funzione dall'evento onclick, andrebbe comunque a restituire il valore della variabile; dentro il pulsante (da cui è scatenato l'evento) però tale variabile risulta chiaramente indefinita.

Quindi hai bisogno di passare la stringa che dovrà contenere (come argomento della funzione) non tanto il nome della variabile ma bensì il suo valore.

var index="qualcosa";
alert ("infomenu(index)"); // restituisce "infomenu(index)"
alert ("infomenu('"+index+"')"); // restituisce "infomenu('qualcosa')"

Spero sia un po' più chiaro adesso o quantomeno spero di non averti confuso maggiormente le idee.

Ci potrebbero essere comunque altri metodi, ad esempio definendo l'evento click come evento JavaScript e non impostandolo come attributo HTML... ma questa è un'altra storia

 

[Laskot]

E' un gran risposta, ti ringrazio mi è tutto chiarissimo