Passaggio di valori fra funzioni

di
tonyven1
il
40 risposte
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69

Passaggio di valori fra funzioni

Ciao a tutti. Sto provando a passare il valore di un array in una  funzione che lo popola ad un'altra funzione che dovrebbe visualizzarlo. Nonostante abbia visto qualche esempio in rete , non riesco a implementarlo. Posto il codice in questione per chiarezza. Posso aggiungere che l'array viene utilizzato su una pagina html per l'inserimento di alcuni valori con delle text box. Successivamente vorrei visualizzare questi valori su un'altra pagina html.

let count=1;

function insGuardia(){
    let dbGuardia=[];
    let guardia={};
    guardia.nome=document.getElementById("nom").value;
    guardia.cognome=document.getElementById("cogn").value;
    guardia.indi=document.getElementById("ind").value;
    guardia.telefono=document.getElementById("tel").value;
    dbGuardia.push(guardia.nome,guardia.cognome,guardia.indi,guardia.telefono);

    for (let i=0;i < dbGuardia.length; i++) {
        document.getElementById("guardia").innerHTML= "<h3>"+"Record inserito"+"</h3>"+ " num: "+count ;
        document.getElementById("vis1").innerHTML +=dbGuardia[i] + "<br>";
        }
        count++; 
   return dbGuardia;
}

function visualizza() {
   test=insGuardia();
   
   document.getElementById("visrec").innerHTML=test;
    
}

40 Risposte

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

    Re: Passaggio di valori fra funzioni

    10/01/2023 - tonyven1 ha scritto:

    Sto provando a passare il valore di un array in una  funzione che lo popola ad un'altra funzione che dovrebbe visualizzarlo.

    Direi di no: in realtà, stai eseguendo la funzione che dovrebbe visualizzare l'array la quale al suo interno va a chiamare direttamente la funzione che dovrebbe definirlo.

    Devi mettere un parametro alla funzione di visualizzazione. Inoltre, nella funzione che crea l'array stai inserendo al suo interno come elementi distinti le varie “qualità” della guardia, e non singole guardie (magari è quello che vuoi, magari no), ovvero gli elementi dell'array saranno i valori dei campi della guardia e non oggetti che contengono i dati di una specifica guardia. Infine, stai passando questo array di dati, che è un array di stringhe, direttamente alla proprietà innerHTML dell'elemento di visualizzazione, che ovviamente ti scriverà qualcosa come “object Array()” poiché manca la conversione in una stringa di ciò che si trova nell'array. Qui di seguito un esempio riepilogativo:

    function visualizza (dati) {
  testo = dati.toString(); // TODO: convertire i dati nel formato HTML per la visualizzazione
  document.getElementById("visrec").innerHTML = testo;   
}

    Direi che c'è molta confusione e una proprietà del linguaggio JavaScript e della sua sintassi da rivedere bene, prima di proseguire con implementazioni complesse, altrimenti prevedo dolori. :)

    Ciao!

  • T
    tonyven1
    Utente Attivo
    Iscritto da
    gen, 2023
    Messaggi:
    69

    Re: Passaggio di valori fra funzioni

    Ciao. Non credo di aver capito molto. La funzione insGuardia mi permette di inserire dei valori nell'array e infatti nella stessa pagina di inserimento mi visualizza i valori. La funzione visualizza() mi dovrebbe visualizzare,premendo un pulsante, questi valori inseriti in un'altra pagina. Per fare questo ho pensato di rendere fruibile all'esterno della funzione insGuardia l'array dbGuardia. Quello che non riesco a fare è proprio questo. Che parametro devo passare,come dici te, alla funzione visualizza()? Non riesco a recuperare i valori dell'array all'interno della funzione visualizza().

    Saluti

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

    Re: Passaggio di valori fra funzioni

    11/01/2023 - tonyven1 ha scritto:

    La funzione visualizza() mi dovrebbe visualizzare,premendo un pulsante, questi valori inseriti in un'altra pagina.

    Cosa intendi con “un'altra pagina”? Se ricarichi la pagina nel browser, o se navighi verso una pagina differente, le informazioni delle tue variabili vanno perse, a meno di non andarle a inserire all'interno di uno storage (semi)persistente, come LocalStorage/SessionStorage e affini.

    11/01/2023 - tonyven1 ha scritto:

    Per fare questo ho pensato di rendere fruibile all'esterno della funzione insGuardia l'array dbGuardia. Quello che non riesco a fare è proprio questo. Che parametro devo passare,come dici te, alla funzione visualizza()? Non riesco a recuperare i valori dell'array all'interno della funzione visualizza().

    Qui sono io che non ho capito nulla, ma secondo me devi fare uno, due o anche tre o quattro passi indietro sulla sintassi JavaScript e sui fondamentali prima di iniziare a imbastire una logica più complessa, perché ci sono diverse cose del tuo codice che mi fanno maturare questa impressione…

  • T
    tonyven1
    Utente Attivo
    Iscritto da
    gen, 2023
    Messaggi:
    69

    Re: Passaggio di valori fra funzioni

    Ciao. Sto cercando,sotto tuo consiglio, di utilizzare localStorage per memorizzare i dati che inserisco in alcune textbox. Questo è il codice che sto usando. Problema: non memorizza sul browser. Se chiudo e poi riapro il browser i dati vanno persi. Dove sbaglio?  Poi ogni volta che aggiorno la pagina azzera tutto. LocalStorage non dovrebbe mantenere i dati inseriti? Quando controllo se ci sono i dati sulla finestra “Strumenti per sviluppatori” vedo che non mantiene i dati tra una sessione e un'altra. Non dovrebbe invece mantenere i dati? Dove posso trovare della documentazione su questa API?

    var count=1;
var dbGuardia=[];

function insGuardia(){
  
   let nome=document.getElementById("nom").value;
   let cognome=document.getElementById("cogn").value;
   let indi=document.getElementById("ind").value;
   let telefono=document.getElementById("tel").value;
   let guardia={nome:nome,cognome:cognome,indirizzo:indi,telefono:telefono};
   let  testo=JSON.stringify(guardia);

    document.getElementById("guardia").innerHTML= "<h3>"+"Record inserito"+"</h3>"+ " num: "+count ;
    count++; 
    dbGuardia.push(testo);
    window.localStorage.setItem('guardie', JSON.stringify(dbGuardia));
    document.getElementById("vis1").innerHTML =window.localStorage.getItem("guardie")+"<br>";
    
}

 
function visualizza() {

 document.getElementById("visrec").innerHTML =window.localStorage.getItem("guardie")+"<br>";
}
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

    Re: Passaggio di valori fra funzioni

    13/01/2023 - tonyven1 ha scritto:

    Questo è il codice che sto usando. Problema: non memorizza sul browser. Se chiudo e poi riapro il browser i dati vanno persi. Dove sbaglio?

    Queste funzioni quando vengono richiamate? Dov'è il resto del codice? Come viene eseguito e dove si trova? Siamo sicuri che il browser usi l'ultima versione e non uno script in cache non aggiornato?

    13/01/2023 - tonyven1 ha scritto:

    let testo = JSON.stringify(guardia);
dbGuardia.push(testo);
window.localStorage.setItem('guardie', JSON.stringify(dbGuardia));

    Nel codice sopra, stai convertendo in stringa i dati della guardia, poi inserisci nell'array dbGuardia la stringa, invece che i dati della guardia, poi di nuovo converti l'array da JSON a stringa, ottenendo quindi la rappresentazione testuale di un array di stringhe… non capisco a che servono tutte queste conversioni ripetute.

    I dati si mettono in oggetti. Se si vogliono salvare più elementi, si fa il push() nell'array dell'oggetto e non della stringa, mentre da JSON a testo si converte una volta sola, quando è necessario caricare o salvare i dati.

    Continuo a non capire la finalità del codice che hai scritto, e qualunque sia è senz'altro errato oltre a non essere ordinato.

    13/01/2023 - tonyven1 ha scritto:

    Dove posso trovare della documentazione su questa API?

    Te l'ho linkata nella mia risposta precedente: se cerchi nel testo, il riferimento a Local Storage era un link messo apposta.

  • T
    tonyven1
    Utente Attivo
    Iscritto da
    gen, 2023
    Messaggi:
    69

    Re: Passaggio di valori fra funzioni

    Ciao. Sto diventando stupido. Ho due listati:

    <!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
localStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>

</body>
</html>
    function insGuardia(){
localStorage.setItem('guardie','cicciobello');
document.getElementById("vis1").innerHTML =localStorage.getItem("guardie");
}

    Il secondo listato viene richiamato da questa pagina:

    <!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <title>Carcere di Gotham City</title>
</head>
<header class="titolo"><h1>Sezione inserimento dati Guardie</h1></header>
<body>
    <script src="gotham.js"></script>
    <link href="style.css" rel="stylesheet">
    <table>
        <tr>
            <td>
                <label>Nome</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="nom"> 
            </td>
        </tr>
        <tr>
            <td>
                <label>Cognome</label>
            </td>
        </tr>
            <td>
                <input type="text" id="cogn">
            </td>
        </tr>
        <tr>
            <td>
                <label>Indirizzo</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="ind">
            </td>
        </tr>
        <tr>
            <td>
                <label>Telefono</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tel">
            </td>
        </tr>
    </table>
    
    <input type="button" class="btn" onclick="insGuardia()" value="Registra"><br>
    
    <p id="guardia" class="divIns"></p><br>
    <p id="vis1" class="div1Ins"></p>
    <a href="pagGuardie.html">
    <input type="button" id="pul" value="Menu Guardie">
    </a>
  </body>
</html>

    Mentre il primo listato funziona con localStorage il secondo non và. Mentre il primo listato memorizza i dati e se chiudo e riapro il browser i dati sono li, con il secondo i dati vanno persi. Non riesco a capire perchè. Avete idea?

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

    Re: Passaggio di valori fra funzioni

    15/01/2023 - tonyven1 ha scritto:

    Mentre il primo listato funziona con localStorage il secondo non và. Mentre il primo listato memorizza i dati e se chiudo e riapro il browser i dati sono li, con il secondo i dati vanno persi. Non riesco a capire perchè. Avete idea?

    La pagina che dovrebbe fare uso del secondo listato contiene parecchi errori.

    Ad esempio, il foglio di stile viene importato con <link href="…"> e si trova all'interno dell'elemento <body>, mentre dovrebbe stare nella sezione <head>.

    Hai poi messo un tag <header>, quello con il titolo, all'esterno del <body>, mentre dovrebbe stare al suo interno, e non fra <head> e <body>.

    Sorvoliamo poi sul <button> con testo “Menu Guardie” che si trova all'interno di un link <a>.

    Questo per dire che, data la quantità e la qualità di errori formali compiuti solamente per costruire la pagina che deve invocare lo script, chissà quali altre problematiche possono esserci che non emergono da quanto riportato sopra.

    Ad esempio, come vengono aperte le suddette pagine? Direttamente nel browser o con l'aiuto di un Web Server?
    Il browser tende a limitare le possibilità di scripting per tutti i file che vengono aperti direttamente (quindi usando il protocollo file://).

  • T
    tonyven1
    Utente Attivo
    Iscritto da
    gen, 2023
    Messaggi:
    69

    Re: Passaggio di valori fra funzioni

    Ciao. Ebbene si rieccomi. Ho provato a implementare l'API localStorage memorizzando nel browser i dati che prelevo da una pagina. 

    Questo è il codice che ho implementato:

    function insGuardia(){
  let count=1;
  let dbGuardia=[];
  
      let nome =document.getElementById("nom").value;
       let cognome=document.getElementById("cogn").value;
      let indi=document.getElementById("ind").value;
      let telefono=document.getElementById("tel").value;
      
      let guardia={nom:nome,cogn:cognome,indirizzo:indi,telefono:telefono};
      
   dbGuardia.push(JSON.stringify(guardia));
   
  for(let i=0; i <localStorage.length; i++){
localStorage.setItem('guardie',dbGuardia);
  }
document.getElementById("vis1").innerHTML +=dbGuardia+"<br>";
  }


function visualizza() {

 document.getElementById("visrec").innerHTML =localStorage.getItem("guardie")+"<br>";
}

    Però non funziona come vorrei o almeno come ho capito come dovrebbe funzionare. Se,dopo aver inserito i dati chiudo e riapro il browser i dati si perdono. 

    Poi quando inserisco un valore e ne inserisco un'altro me lo sovrascrive.

    In ultimo sulla console del browser mi dà errore:

    gotham.js:13 Uncaught TypeError: Cannot read properties of null (reading 'value')
       at insGuardia (gotham.js:13:46)
       at gotham.js:6:1
    insGuardia @ gotham.js:13
    (anonimo) @ gotham.js:6

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

    Re: Passaggio di valori fra funzioni

    19/01/2023 - tonyven1 ha scritto:

    Però non funziona come vorrei o almeno come ho capito come dovrebbe funzionare. Se,dopo aver inserito i dati chiudo e riapro il browser i dati si perdono. Poi quando inserisco un valore e ne inserisco un'altro me lo sovrascrive. In ultimo sulla console del browser mi dà errore: […]

    Pubblica il codice di esempio su un sito come JSFiddle e CodePen e riporta il link: non c'è altro modo per capire come stanno realmente le cose rispetto a quelle che riporti.

  • T
    tonyven1
    Utente Attivo
    Iscritto da
    gen, 2023
    Messaggi:
    69

    Re: Passaggio di valori fra funzioni

    Ciao. Provo a postare il link di CodePen:

    https://codepen.io/tonyven/pen/BaPmgxO

    Comunque da quello che ho capito sembra che quando utilizzo localStorage.setItem() lo esegue una volta sola. Non aggiunge il nuovo valore quando richiamo la funzione. Spero di essere chiaro

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

    Re: Passaggio di valori fra funzioni

    19/01/2023 - tonyven1 ha scritto:

    Comunque da quello che ho capito sembra che quando utilizzo localStorage.setItem() lo esegue una volta sola.

    E quante volte mai dovrebbe eseguirlo? Lo hai scritto una volta sola nella funzione, quindi viene salvato una volta sola quando invocato.

    Io ad ogni modo ho fatto un fork del tuo codice e aggiungendo un console.log() in fondo allo script vedo i dati dentro al LocalStorage, quindi quello strumento funziona correttamente, nel senso che i dati vengono salvati e li ritrovo anche in seguito riaprendo la pagina (all'interno dello storage, non nella pagina).

    Per il resto, come ho già avuto modo di scrivere più volte, il codice è un gran casino… non è chiaro se vuoi salvare i dati o le rappresentazioni JSON, quello che non funziona in realtà ho scoperto che funziona, il menu non è chiaro cosa faccia… non so… :|

  • T
    tonyven1
    Utente Attivo
    Iscritto da
    gen, 2023
    Messaggi:
    69

    Re: Passaggio di valori fra funzioni

    Ciao. Quello che vorrei fare è visualizzare i dati nella pagina e salvare i stessi dati nel localStorage. Il problema è che se aggiungo altri dati me li sovrascrive nello storage mentre li vorrei aggiungere mantenendo quelli vecchi. E' questo che non capisco come fare.

  • T
    tonyven1
    Utente Attivo
    Iscritto da
    gen, 2023
    Messaggi:
    69

    Re: Passaggio di valori fra funzioni

    Pardon mi correggo. Ho visto meglio e in effetti i dati li accoda.

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

    Re: Passaggio di valori fra funzioni

    20/01/2023 - tonyven1 ha scritto:

    Pardon mi correggo. Ho visto meglio e in effetti i dati li accoda.

    I dati li accoda, ma li accoda male, perché tu non devi salvare i dati di ciascuna guardia in formato JSON accodandoli all'array, ma accodare gli oggetti stessi con i dati della guardia, trasformandoli in JSON solo al momento del salvataggio, e in blocco.

    Questo vuol dire che, quando vuoi “accodare” i dati di una guardia, scriverai qualcosa del tipo

    let guardia = {nom:nome, cogn:cognome, indirizzo:indi, telefono:telefono };
dbGuardia.push(guardia);

    La memorizzazione dei dati nel Local Storage riguarderà il contenitore di tutti i dati delle guardie censite, quindi l'array, e pertanto lo salverai in questo modo:

    localStorage.setItem('guardie', JSON.stringify(dbGuardia));

    In breve, trasformerai tutti i dati di tutte le guardie nel formato JSON, prima di salvarlo nel Local Storage, e non solo quelli di una guardia singola inserendo quella nell'array.

    Quando vuoi recuperare i dati delle guardie, ti basta rileggere il JSON dal Local Storage e trasformarlo di nuovo in un array in questo modo:

    JSON.parse(localStorage.getItem("guardie"));

    Prova a far tesoro di queste indicazioni e a essere più preciso anche nel feedback (non ci sta dire che qualcosa non funziona perché non ti sei accorto di ciò, altrimenti non ne usciamo più). :)

Devi accedere o registrarti per scrivere nel forum
40 risposte