Buongiorno ragazzi, premetto che mi sto avvicinando al javascript da pochissimo, mi sto imbattendo in un problema che pur essendo relativamente semplice non riesco a trovare una soluzione.

Vi mostro il codice:

codice:
<script type="text/javascript">
   var nzone = localStorage.getItem("nzone");
   var nrighe = localStorage.getItem("nrighe");
</script>
codice:
<script id="html" language="text">   <a href="porte.html" class="portfolio-wide-item">
   <h1 id="zonetta"></h1>
   <p><span class="text-highlight highlight-dark">Temp. 23.05 C°</span><span class="text-highlight highlight-turqoise">Nessun allarme attivo</span></p>
   <div class="overlay"></div>
   <img class="responsive-image" src="images/pictures/1ww.jpg" alt="img">
   </a>
</script>
codice:
<script type="text/javascript">   for (i=1; i<nrighe+1; i++) {
       
       var rigax = localStorage.getItem("riga"+i);
       
       var postzona = rigax.search("zona_");
       var nomzona = rigax.substr(postzona+7,postzona+9);
       //recupero il nome della zona
       var postaglio = rigax.search("kk");
       var str = rigax.substr(postaglio + 2);
       var postaglio2 = str.search("kk");
       
       var zona_nome = str.substr (0, postaglio2);
   
       if (nomzona != nomoldzona){
           var nzonen = nzonen+1;
           var nomoldzona = nomzona;
           
           //visualizzo zona in html
           
           var div = document.createElement('div');
           div.innerHTML = document.getElementById('html').innerHTML;
           document.getElementById('spazio').appendChild(div);
           document.getElementById('zonetta').innerHTML=zona_nome;
         }}
</script>
Questo script è orientato a riempire il div <div id="spazio"></div> con il contenuto di <script id="html" language="text">, dove all'interno devo inserire delle variabili, esempio <h1 id="zonetta"></h1> corrisponde al nome della zona.

Per quanto riguarda il ciclo for non ci sono problemi, mi riporta correttamente il numero delle righe (in questo caso 46 e le cicla correttamente. Infatti crendo un window.alert (zona_nome); ottengo giustamente tutti i nomi delle zone, ma doppioni, poichè ogni zona ha tot porte e quindi la stringa che vado a cercare avrà lo stesso nome zona quante sono le porte di quella zona. Con il ciclo if vado ad estrarre i nomi delle zone una volta soltanto, quindi in questo caso ottengo 10 nome zona univoci. Fino a questo punto è tutto perfetto, infatti inserendo all'interno del ciclo if window.alert(zona_nome); ottengo giustamente 10 zone che sono i nomi delle zone non più ripetuti.

Poi vado ad aggiungere
codice:
var div = document.createElement('div'); 
div.innerHTML = document.getElementById('html').innerHTML;
document.getElementById('spazio').appendChild(div);
così ottengo che il contenuto di:

codice:
<script id="html" language="text">   <a href="porte.html" class="portfolio-wide-item">
   <h1 id="zonetta"></h1>
   <p><span class="text-highlight highlight-dark">Temp. 23.05 C°</span><span class="text-highlight highlight-turqoise">Nessun allarme attivo</span></p>
   <div class="overlay"></div>
   <img class="responsive-image" src="images/pictures/1ww.jpg" alt="img">
   </a>
</script>
sia ripetuto n volte quante sono le zone, in questo caso 10. Anche in questo caso tutto perfetto.

Adesso giungiamo al mio problema, nel momento in cui vado ad inserire:

codice:
document.getElementById('zonetta').innerHTML=zona_nome;
che dovrebbe inserire nel tag <h1 id="zonetta"></h1> il nome della zona, succede che alla prima zona mette il nome dell'ultima, mentre nelle altre 9 non mostra assolutamente nulla.

Spero di essere stato chiaro, potete aiutarmi?

Grazie in anticipo