Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Stampare il ciclo for in un array

    Ciao a tutti.

    Studio da poco JavaScript, e ovviamente mi sto esercitando, sperimentando man mano le varie possibilità e combinazioni di for, if eccetera.

    Ho creato questa piccola funzione che cicla 10 checkbox, restituendo 1 se il checkbox che analizza è stato selezionato, e 0 se no. Il tutto si attiva quando si clicca su un campo successivo del form (una textarea).

    Vorrei avere un elenco di risultati in un array o (come ho provato a fare) in un div specifico tramite l'id ("valori"); ho tentato inserendo l'opzione nell'if e anche solo nel for, ma appare sempre un solo risultato, mentre dovrebbe restituirmene dieci. Con il console.log invece funziona.

    Qualcuno sa spiegarmi perché?

    Grazie.



    <html>

    <head>

    <script>

    function countCheck() {

    var checkName = document.getElementsByClassName("interessi");
    console.log(checkName);

    for (i = 0; i < 10; i++) {

    var casellaCheckata = "vuota";
    if (checkName[i].checked === true) {
    casellaCheckata = 1;
    // document.getElementById("valore").innerHTML = "<span>" + casellaCheckata + " </span>" ;
    } else {
    casellaCheckata = 0;
    // document.getElementById("valore").innerHTML = "<span>" + casellaCheckata + " </span>" ;
    }

    console.log(casellaCheckata); // FUNZIONA
    document.getElementById("valore").innerHTML = "<span>" + casellaCheckata + " </span>" ; // Restituisce solo un valore

    }

    }

    </script>

    </head>

    <body>

    <form>

    <label> Aree d'interesse: </label>

    <fieldset style="max-width: 400px;">

    <input type="checkbox" name="valore1" id="interessi1" value="Grafica pubblicitaria"> Grafica pubblicitaria
    <input type="checkbox" name="valore2" id="interessi2" value="Grafica editoriale"> Grafica editoriale <br>
    <input type="checkbox" name="valore3" id="interessi3" value="Graphic design"> Graphic design
    <input type="checkbox" name="valore4" id="interessi4" value="Web design"> Web design <br>
    <input type="checkbox" name="valore5" id="interessi5" value="CMS"> CMS
    <input type="checkbox" name="valore6" id="interessi6" value="E-commerce"> E-commerce <br>
    <input type="checkbox" name="valore7" id="interessi7" value="Disegno"> Disegno
    <input type="checkbox" name="valore8" id="interessi8" value="Crafting"> Crafting <br>
    <input type="checkbox" name="valore9" id="interessi9" value="Programmazione"> Programmazione
    <input type="checkbox" name="valore10" id="interessi10" value="Altro"> Altro

    <br>

    <div id="valore"> </div>

    </fieldset>

    <br><br>

    <label> Scrivi qui il tuo messaggio: </label> <br>
    <textarea type="text" value="messaggio" onFocus="countCheck()"></textarea>

    </form>

    </body>

    </html>
    Ultima modifica di Morrigan; 15-11-2019 a 23:23

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,683
    Ciao e benvenuto

    Ho creato questa piccola funzione che cicla 10 checkbox
    Nel codice vedo qualche incongruenza; stai usando getElementsByClassName("interessi"); ma non vedo quella classe applicata sugli elementi HTML in questione. Ovviamente, provando il codice così com'è, mi da un errore che interrompe lo script. Forse hai postato un codice non aggiornato o mancante di qualche parte. Ad ogni modo ho provveduto ad aggiungere la classe sugli elementi per poter correggere questo errore.

    Vorrei avere un elenco di risultati in un array
    In tal caso dovrai usare un array che puoi popolare nel ciclo usando magari il metodo push().

    in un div specifico tramite l'id ("valori"); ho tentato inserendo l'opzione nell'if e anche solo nel for, ma appare sempre un solo risultato, mentre dovrebbe restituirmene dieci. Con il console.log invece funziona.
    I risultati li stai "stampando" di volta in volta attraverso il ciclo. La funzione consol.log() te li mostra tutti per il semplice fatto che anche quando è richiamata più volte non cancella i precedenti log, ma ogni volta aggiunge quello nuovo in una nuova riga.

    Quando invece assegni direttamente un valore alla proprietà innerHTML di un qualsiasi elemento HTML, il suo contenuto sarà rimpiazzato dal nuovo contenuto definito dal nuovo valore che gli stai applicando. Per tale motivo vedrai solo quell'ultimo valore una volta finito il ciclo.

    Non è chiaro a cosa ti serva mostrare i risultati dentro quel div; presumo sia solo hai fini dell'esercitazione.

    In questo caso, se vuoi mantenere i precedenti risultati puoi usare, per innerHTML, l'operatore di concatenamento/assegnazione (+=) anziché quello di assegnazione (=). Questo farà in modo di aggiungere ogni volta il valore corrente a quello che già esiste. Se ti serve poi visualizzare la serie di valori in modo incolonnato puoi aggiungere un <br> per ciascun valore.

    Chiaramente ogni volta che avviene il ciclo, la serie di valori sarà aggiunta alla proprietà innerHTML mantenendo anche tutti i valori delle precedenti esecuzioni del ciclo. Eventualmente puoi pensare di vuotare il div prima di eseguire il ciclo; puoi semplicemente assegnare una stringa vuota ad innerHTML.

    L'ideale sarebbe comunque usare appunto un array che vai a popolare attraverso il ciclo e, solo dopo, assegnare ad innerHTML la serie di valori già convertita in stringa (applicando magari un join() a quell'array).

    Fai magari qualche prova, se poi hai bisogno di ulteriori chiarimenti, chiedi pure.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Ciao,

    grazie mille della risposta.

    Avevo in effetti omesso le classi dei checkbox per una svista nella pulizia del codice per poterlo postare.
    Il tutto è per un esercizio di controllo del form, ed è in continuo divenire (ora dovrò sommare i risultati per verificare che siano state checkate almeno tre caselle).
    Non conoscevo ancora il += né il join, ma li ho usati con successo. Ho inoltre creato l'array delle risposte.

    Grazie ancora dell' aiuto. Se ci sarà altro, posterò qui sotto.



    Grazie mille...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.