Ciao e bentrovato, a prescindere da ciò che chiedi, perdona la franchezza, vedo un codice alquanto "artigianale". Sebbene ciò che hai postato siano poche righe, 3/4 di queste sono di codice ridondante. Questo tipo di sviluppo a me confonde parecchio; personalmente andrei ad ottimizzarlo.
- Non ha molto senso suddividere lo script in millemila tag separati. Metti un unico tag <script> alla fine di quel blocco html e scrivi lì dentro tutto lo script.
- In modo simile, avere millemila funzioni che fondamentalmente fanno la stessa operazione è un anti-pattern. Crea un'unica funzione tipo scegliTema(), passale un parametro relativo al tema scelto, quindi usa questo per applicare la classe al tuo body in modo "dinamico".
- Infine, meglio mantenere separata l'azione dalla struttura. Per una migliore impostazione nella programmazione, è preferibile evitare (dove possibile) l'uso di eventi applicati direttamente sui tag html (vedi i tuoi onclick); meglio creare un ciclo via JavaScript è usare il metodo addEventListener() o similari. Il valore da passare alla funzione potresti definirlo come "data-" nei tag, elementi del dropdown.
Per rispondere alle tue domande:
1) Suppongo sia possibile ma bisogna capire meglio cosa intendi per "memorizzare".
E' possibile memorizzare un valore in un oggetto localStorage, per cui puoi recuperarlo nelle altre pagine del sito (a patto che siano nello stesso "dominio"). Questa memorizzazione resta a livello del client (quindi del browser); il sistema funziona fintanto che l'utente naviga o rientra su tale sito sempre con lo stesso browser.
Se invece vuoi memorizzare il dato in modo da poterlo recuperare ovunque, cioè anche quando l'utente naviga il sito dal suo smartphone piuttosto che dal tablet o dal pc, con diversi browser, allora la storia diventa un po' più complessa. Dovresti avere un sistema di accesso per gli utenti registrati, quindi memorizzare il dato lato server in un database.
Chiarisci questo punto.
2) Dovresti rimuovere la classe precedentememte applicata, prima di applicare quella nuova. Puoi risolvere in vari modi; ad esempio, quando applichi la classe, potresti memorizzare il suo nome in un attributo "data-" che vai ad applicare al body. Successivamente, nella funzione scegliTema, recuperi quel valore e rimuovi la classe relativa a tale nome.
Inoltre, forse più che usare il toggle sulla classe, potrebbe essere meglio inserire una voce cliccabile, tra quelle presenti, per impostare il tema di default (rimuovendo quindi qualsiasi classe theme dal body).
Qui la minestra pronta (senza il punto 1 che dovresti chiarire):
Non sono stato lì a commentare il codice ma se hai domande chiedi pure.codice:<div id="myDropdown" class="dropdown-content"> <p class="little-resize pointer" data-tema="" >[ Default ]</p> <p class="little-resize pointer" data-tema="past" >Past</p> <p class="little-resize pointer" data-tema="blank" >Blank</p> <p class="little-resize pointer" data-tema="apricot" >Apricot</p> <p class="little-resize pointer" data-tema="panorama" >Panorama</p> <p class="little-resize pointer" data-tema="transparent" >Transparent</p> <p class="little-resize pointer" data-tema="slimanoworld" >SlimanoWorld</p> </div> <script> function scegliTema(tema) { const body = document.body; if (body.dataset.tema) body.classList.remove(body.dataset.tema); body.dataset.tema = tema; if (tema) body.classList.add(tema); } (()=>{ const elementi = document.querySelectorAll('#myDropdown > p'); for (let i = 0; i < elementi.length; ++i) { const el = elementi[i]; const nomeTema = el.dataset.tema ? el.dataset.tema+'-theme' : ''; elementi[i].addEventListener('click', function(){scegliTema(nomeTema)}); } })(); </script>


Rispondi quotando
