richiamare una variabile

[toreg]

salve a tutti
mi stò perdendo in bicchiere di acqua ma non riesco a venirne fuori!

function addEventoTabUtente() {

    let tbody = document.getElementById('body_tab_utenti');
    let tr_array = tbody.getElementsByTagName('tr');

    // per ogni riga della tabella, 
    for ( const tr of tr_array ) {
        id_utente = tr.querySelector('[data-th="ID_utente"]').innerText;
        console.log(id_utente);
        
        campo_bloccato = tr.querySelector('[data-th="bloccato"]');
        campo_bloccato.setAttribute('onclick',"alert('num:'+id_utente)");
    }
}

dopo aver stampato a video una table, ho necessità di aggiungere un onclick su un campo chiamato "bloccato", per prova con onclick lancio un alert che deve comunicarmi l'id_utente della riga "premuta" che prelevo dalla tabella stessa con querySelector.

Il problema è che quando clicco sul campo con l' onclick l'alert non mi comunica l' id_utente della relativa riga ma dell' ultima!!

Credo che il setAttribute non mi scrive il valore che la variabile id_utente ha in quel momento del ciclo for ma scrive la funzione che ha la variabile!!

campo_bloccato.setAttribute('onclick',"alert('num:'+id_utente)");

dove sbaglio??

[KillerWorm]

Ciao, ci sono un po' di cose da correggere.

1 - La variabile id_utente dentro il ciclo è definita in modo globale perché non hai usato alcuna dichiarazione. Puoi usare const o let per definirla a livello di blocco.

2 - Per applicare programmaticamente una funzione ad un evento è meglio usare addEventListener() piuttosto che passare attraverso il setAttribute().

3 - La variabile che hai definito dentro quella stringa, per come hai applicato quell'evento, viene di fatto letta come variabile globale, fuori dal ciclo, perché passa attraverso l'evento click definito come attributo HTML.

Prova a correggere in questo modo, secondo quanto ho indicato:

for ( const tr of tr_array ) {
    const id_utente = tr.querySelector('[data-th="ID_utente"]').innerText;

    campo_bloccato = tr.querySelector('[data-th="bloccato"]');
    campo_bloccato.addEventListener('click', function(){ alert('num:'+id_utente) });
}

[toreg]

grazie KillerWorm
la tua soluzione funziona!

Inizialmente era impostata come let, poi provando e riprovando a modificare è rimasta questa versione, se impostata come let al momento del click ho l'errore "id_utente is not defined" .. Non riesco a capire!

Ho usato setAttibute pensando che mi andasse a modificare direttamente il codice html, cioè analizzando poi il codice html mi ritrovavo

onclick=( alert('num:128') )

con il valore id già stampato e non un collegamento dinamico!

In altre applicazioni ho utilizzato:

td.innerHTML = `<button class="btn-modifica" title="modifica" onclick="btn_modifica_record('${nomeTabella}', '${colonna_index_tabella}', ${ID_riga})"></button>`;

e in questo caso ho i valori delle variabili direttamente stampate sul codice html.

Secondo te dove faccio confusione?? Quale concetto non ho bene a mente??

[KillerWorm]

Secondo te dove faccio confusione?? Quale concetto non ho bene a mente??

Uno è l'uso appropriato degli apici in modo da concatenare le variabili o il relativo valore ad una stringa; l'altro è l'ambito di visibilità delle variabili.

Provo a darti qualche indicazione.

onclick=( alert('num:128') )

No, per essere precisi, quando usi questa roba:

campo_bloccato.setAttribute('onclick',"alert('num:'+id_utente)");

otterrai esattamente questo nell'HTML:

onclick="alert('num:'+id_utente)"

dove la variabile id_utente (non il suo valore) è stata passata proprio come nome-variabile, il cui valore sarà quindi "calcolato" quando avviene quell'evento click.
Per cui, se id_utente è definita in modo globale (come era inizialmente dove non l'hai dichiarata) il valore ottenuto è quello che avrà quella variabile quando avviene esattamente quell'evento click. Nel tuo caso infatti quella variabile, restando globale, restituiva l'ultimo valore assunto una volta terminato il ciclo.

Una variabile globale sarà infatti accessibile in qualsiasi "ambito di visibilità", per cui anche dentro la funzione definita per quegli eventi click. Chiaramente in questo caso ti serve a ben poco perché il valore restituito è sbagliato.

Se però dichiari la variabile nell'ambito del ciclo, usando let o const, non sarà visibile quando cerchi di calcolarla una volta finiti i giochi, cioè nell'ambito della funzione per l'evento click, passando attraverso l'attributo HTML.

In tal caso puoi calcolare il valore preventivamente per concatenare questo (e non il nome-variabile) alla stringa da passare come attributo. Dovrai quindi "calcolarlo" nel momento in cui costruisci la stringa stessa.

La stringa può essere scritta in svariati modi per ottenere comunque uno stesso risultato.

Ad esempio potrebbe essere impostata così (fai attenzione alla sequenza dei diversi apici):

campo_bloccato.setAttribute('onclick', "alert('num: " + id_utente + "')");

oppure così (con apici invertiti):

campo_bloccato.setAttribute('onclick', 'alert("num: ' + id_utente + '")');

oppure così (facendo gli opportuni escape degli apici):

campo_bloccato.setAttribute('onclick', "alert(/"num: " + id_utente + "/")");

campo_bloccato.setAttribute('onclick', 'alert(/'num: ' + id_utente + '/')');

oppure usando una template string (come è per il tuo ultimo esempio di codice):

campo_bloccato.setAttribute('onclick', `alert('num: ${id_utente}')`);

e così via.

In questo modo, supponendo ad esempio che id_utente sia 128 nel momento in cui questo valore viene concatenato alla stringa costruita nel ciclo, lato HTML si otterrà sostanzialmente questo:

onclick="alert('num: 128')"

Cioè non viene concatenato il nome-variabile, dove il valore viene calcolato quando avviene il click, ma bensì il suo valore restituito preventivamente durante l'esecuzione del ciclo.

MA, ripeto, come buona pratica di programmazione è consigliabile usare il metodo addEventListener() piuttosto che andare a pasticciare l'HTML in quel modo.

In qualunque caso quella variabile funzionerà nel modo corretto, restituendo il suo corrispettivo valore, se è opportunamente impostata e concatenata alla stringa da restituire.

Spero di averti chiarito questi aspetti
fai sapere

[toreg]

in effetti a pensarci bene così è proprio errato:

 onclick="alert('num:'+id_utente)"

invece così dovrebbe essere corretto giusto? :

 onclick="alert('num:'"+id_utente+"' )"

tra le varie prove credo di aver utilizzato questa versione:

campo_bloccato.setAttribute('onclick', `alert('num: ${id_utente}')`);

l'ho usata anche nell altra app e visto che li funzionava così come volevo, cioè scrivere il valore, l'ho copiata..

td.innerHTML = `<button class="btn-modifica" title="modifica" onclick="btn_modifica_record('${nomeTabella}', '${colonna_index_tabella}', ${ID_riga})"></button>`;

A volte nonostante aggiorno la pagina con ctrl+F5 non carica il nuovo codice, mi è già successo!

Io utlizzo Firefox, è consigliabile un altro browser e/o versioni particolare per fare debug e test??

[toreg]

nooo mi correggo da solo!! Così è errato c'è un apice in più!!

onclick="alert('num:'"+id_utente+"' )"

ok..comunque ho capito

graziee