document.getElementById

[cipiupiu]

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:

<script type="text/javascript">
   var nzone = localStorage.getItem("nzone");
   var nrighe = localStorage.getItem("nrighe");
</script>

<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>

<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

var div = document.createElement('div'); 
div.innerHTML = document.getElementById('html').innerHTML;
document.getElementById('spazio').appendChild(div);

così ottengo che il contenuto di:

<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:

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

[lucavizzi]

succede che alla prima zona mette il nome dell'ultima, mentre nelle altre 9 non mostra assolutamente nulla.

Gli id all'interno del documento devono essere univoci.
Se ho ben capito il meccanismo del tuo script, esegui ripetutamente degli innerHTML sempre nello stesso id "zonetta", il primo del documento, ecco perché

succede che alla prima zona mette il nome dell'ultima

getElementById prende in considerazione il primo id che trova nel documento (dall'alto verso il basso), anche perché dovrebbe essere l'unico.

[KillerWorm]

Ciao, ti rispondo molto rapidamente. C'è un problema di fondo (che prescinde da JavaScript), gli id devono obbligatoriamente essere univoci all'interno di uno stesso documento html. Sono concetti base, consiglio di fare qualche ricerca.

Puoi risolvere creando degli id indicizzati (del tipo zonetta1, zonetta2, ecc..) oppure usando, opportunamente, delle classi anziché id.




EDIT: @lucavizzi, chiedo scusa, non avevo visto il tuo post.

[lucavizzi]

@KillerWorm no problem