Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript

[Mario1988]

Devo sommare l'altezza di N DIV, e ho creato una funzione javascript. Senza ciclo FOR tutto funziona, se invece uso il FOR e commento il codice in eccesso, non mi somma nulla.

function somma (box_other)
{
            h_box_down = 0;
            tot = 0;
            var i;
            for (i=0; !(isNaN(h_box_down)); i++)
            {
                /*i = 0;*/
                h_box_down = parseInt(window.getComputedStyle(box_other[i], null).getPropertyValue("height"));
                if (!(isNaN(h_box_down)))
                    tot += h_box_down;
                /*i = 1;
                h_box_down = parseInt(window.getComputedStyle(box_other[i], null).getPropertyValue("height"));
                if (!(isNaN(h_box_down)))
                    tot += h_box_down;*/
                    
            }
            document.write("<br>Totale = " + tot);
}

 

[WmbertSea]

Le indicazioni sono insufficienti per capire esattamente dove sta il problema. Dovresti specificare cosa stai passando alla variabile box_other, come argomento della funzione.

La logica che hai utilizzato per quel ciclo mi pare un po' contorta.
La variabile i, che hai usato come contatore nella definizione del for, la stai poi valorizzando anche dentro il ciclo?!
Non ne capisco il senso.
Quelle tre righe di istruzioni dentro il ciclo che poi si ripetono commentate, perché le vuoi ripetere?!
Anche qui, non ne capisco il senso.

Ad ogni modo, da quel che intuisco, l'errore potrebbe dipendere da come hai impostato il metodo getComputedStyle(). Il primo parametro dovrebbe sempre essere un elemento valido del DOM perché altrimenti quello stesso metodo andrà a generare un errore bloccando l'esecuzione dello script a seguire. Suppongo (ma dovresti specificarlo tu, come già detto sopra) che box_other sia un oggetto NodeList (o comunque un qualche tipo di oggetto collection) per cui tu stia cercando di valutarne una voce non definita, magari dandogli in pasto un valore fuori range per il relativo indice.

Ho l'impressione che tu stia cercando di sfruttare proprio questo "errore" per fare in modo che la variabile h_box_down risulti NaN, così da validare la condizione del ciclo ed interromperlo. In tal caso non può funzionare così perché appunto ottieni un errore che interrompe lo script; ad ogni modo penso che la logica utilizzata sia comunque da rivedere.

Eventualmente prova a fornire maggiori dettagli così che ti si possa suggerire delle soluzioni mirate.

 

[Mario1988]

Le indicazioni sono insufficienti per capire esattamente dove sta il problema. Dovresti specificare cosa stai passando alla variabile box_other, come argomento della funzione.

La logica che hai utilizzato per quel ciclo mi pare un po' contorta.
La variabile i, che hai usato come contatore nella definizione del for, la stai poi valorizzando anche dentro il ciclo?!
Non ne capisco il senso.
Quelle tre righe di istruzioni dentro il ciclo che poi si ripetono commentate, perché le vuoi ripetere?!
Anche qui, non ne capisco il senso.

Ad ogni modo, da quel che intuisco, l'errore potrebbe dipendere da come hai impostato il metodo getComputedStyle(). Il primo parametro dovrebbe sempre essere un elemento valido del DOM perché altrimenti quello stesso metodo andrà a generare un errore bloccando l'esecuzione dello script a seguire. Suppongo (ma dovresti specificarlo tu, come già detto sopra) che box_other sia un oggetto NodeList (o comunque un qualche tipo di oggetto collection) per cui tu stia cercando di valutarne una voce non definita, magari dandogli in pasto un valore fuori range per il relativo indice.

Ho l'impressione che tu stia cercando di sfruttare proprio questo "errore" per fare in modo che la variabile h_box_down risulti NaN, così da validare la condizione del ciclo ed interromperlo. In tal caso non può funzionare così perché appunto ottieni un errore che interrompe lo script; ad ogni modo penso che la logica utilizzata sia comunque da rivedere.

Eventualmente prova a fornire maggiori dettagli così che ti si possa suggerire delle soluzioni mirate.

Punto 1)
Supponendo che abbia 3 DIV con i rispettivi id settati come segue: id = "box_1", id = "box_2", id = "box_3",
uso la funzione nel seguente modo: somma(box_1, box_2, box_3).

Punto 2)
Ho fatto una prova togliendo il CICLO FOR e decommentando il codice, constatando che funzione.
Se invece eseguo la funzione cosi come riportata quindi con il FOR, non mi funzione, tradotto non mi somma le altezze dei DIV.

Punto 3)
In effetti quella somma potrei farla direttamente senza usare la if dato che ho fatto già il parse.

 

[WmbertSea]

Punto 1)
La tua funzione ha un singolo argomento: somma (box_other)
Se tu stai effettuando una chiamata, esattamente come hai indicato, nel seguente modo: somma(box_1, box_2, box_3); un possibile errore potrebbe essere già questo. Se vuoi passare quegli elementi come un array, dovrai includerli dentro un array, ad esempio in questo modo: somma([box_1, box_2, box_3])
ma...

Punto 2)
Se hai constatato che funziona senza ciclo, come hai indicato anche inizialmente, allora questo non concorda col "Punto 1" dal momento che presumibilmente l'argomento della funzione è appunto un regolare array. In tal caso ti ho già dato indicazioni nel precedente post. L'errore potrebbe dipendere dall'elemento box_other che stai passando al metodo getComputedStyle(); è presumibile che l'indice i, incrementato nel ciclo, vada oltre il valore accettabile per gli effettivi elementi dell'array stesso. Ti faccio un esempio: se hai i tre elementi, che definisci nel tuo array, allora le voci box_other[0], box_other, [1]box_other[2], restituiscono giustamente quegli elementi, quindi sono elementi validi che possono essere passati al metodo getComputedStyle(); ma nel tuo ciclo (così mi pare di capire) l'indice continua ad essere incrementato, per cui arriverai ad avere un elemento box_other[3] che risulta undefined per cui, passandolo al metodo getComputedStyle() viene generato un errore che interrompe l'esecuzione dello script. Spero sia chiaro.

Punto 3)
Non capisco di che parse stai parlando. Ad ogni modo, quando ho parlato di "condizione del ciclo", non mi riferivo all'if, dentro il ciclo, ma esattamente alla condizione !(isNaN(h_box_down)) che hai definito per il for (anche se poi le due sono uguali). In effetti non ho capito nemmeno che senso abbia quell'if che hai messo dentro il ciclo, se già di per sé il ciclo dovrebbe interrompersi quando finisce di ciclare gli elementi. Forse mi sto perdendo qualcosa?

In qualunque caso, se vuoi ciclare gli elementi di un array, esistono dei modi più opportuni, ma per questo basta una semplice ricerca del tipo "loop array javascript" o qualcosa del genere, senza stare a reinventare la ruota.

Credimi, per me sarebbe semplice fornirti una soluzione già pronta ma, se sono riuscito a farti comprendere dove sta il problema, preferirei che tu arrivasi da solo a capire come risolvere. Ti consiglierei quindi di rivedere prima di tutto l'impostazione del ciclo. Se poi ti serve ulteriore aiuto, chiedi pure.

Buon proseguimento.

 

[Mario1988]

Punto 1)
La tua funzione ha un singolo argomento: somma (box_other)
Se tu stai effettuando una chiamata, esattamente come hai indicato, nel seguente modo: somma(box_1, box_2, box_3); un possibile errore potrebbe essere già questo. Se vuoi passare quegli elementi come un array, dovrai includerli dentro un array, ad esempio in questo modo: somma([box_1, box_2, box_3])
ma...

Punto 2)
Se hai constatato che funziona senza ciclo, come hai indicato anche inizialmente, allora questo non concorda col "Punto 1" dal momento che presumibilmente l'argomento della funzione è appunto un regolare array. In tal caso ti ho già dato indicazioni nel precedente post. L'errore potrebbe dipendere dall'elemento box_other che stai passando al metodo getComputedStyle(); è presumibile che l'indice i, incrementato nel ciclo, vada oltre il valore accettabile per gli effettivi elementi dell'array stesso. Ti faccio un esempio: se hai i tre elementi, che definisci nel tuo array, allora le voci box_other[0], box_other, [1]box_other[2], restituiscono giustamente quegli elementi, quindi sono elementi validi che possono essere passati al metodo getComputedStyle(); ma nel tuo ciclo (così mi pare di capire) l'indice continua ad essere incrementato, per cui arriverai ad avere un elemento box_other[3] che risulta undefined per cui, passandolo al metodo getComputedStyle() viene generato un errore che interrompe l'esecuzione dello script. Spero sia chiaro.

Punto 3)
Non capisco di che parse stai parlando. Ad ogni modo, quando ho parlato di "condizione del ciclo", non mi riferivo all'if, dentro il ciclo, ma esattamente alla condizione !(isNaN(h_box_down)) che hai definito per il for (anche se poi le due sono uguali). In effetti non ho capito nemmeno che senso abbia quell'if che hai messo dentro il ciclo, se già di per sé il ciclo dovrebbe interrompersi quando finisce di ciclare gli elementi. Forse mi sto perdendo qualcosa?

In qualunque caso, se vuoi ciclare gli elementi di un array, esistono dei modi più opportuni, ma per questo basta una semplice ricerca del tipo "loop array javascript" o qualcosa del genere, senza stare a reinventare la ruota.

Credimi, per me sarebbe semplice fornirti una soluzione già pronta ma, se sono riuscito a farti comprendere dove sta il problema, preferirei che tu arrivasi da solo a capire come risolvere. Ti consiglierei quindi di rivedere prima di tutto l'impostazione del ciclo. Se poi ti serve ulteriore aiuto, chiedi pure.

Buon proseguimento.

Scusami per l'errore. In effetti nel precedente messaggio ho scritto male. Ovviamente per eseguire la funzione era questo il modo giusto somma([box_1, box_2, box_3]) ....

Il parse di cui parlo è il parseInt il quale mi restituisce un intero in vece del classico valore con la relativa unita di misura...per capirci invece di restituirmi 50px mi restituisce 50. Successivamente ho modificato la condizione del ciclo da
"!(isNaN(h_box_down))" in "i < h_box_down.lenght"...ma cmq non funziona

 

[WmbertSea]

Il parse di cui parlo è il parseInt il quale mi restituisce un intero in vece del classico valore con la relativa unita di misura...per capirci invece di restituirmi 50px mi restituisce 50.

Ok.

Successivamente ho modificato la condizione del ciclo da
"!(isNaN(h_box_down))" in "i < h_box_down.lenght"...ma cmq non funziona

Bene, è già qualcosa di più logico ed accettabile. Se non funziona è possibile che ci siano altri problemi. Dovresti magari eseguire qualche console.log per verificare cosa sta succedendo e cosa non va.

Se poi ti serve aiuto nel capire cosa non va, dovresti postare l'attuale script.

Una domanda: ma qual'è esattamente lo scopo di questa tua funzione? Ho capito che vuoi ottenere la somma delle altezze, ma questo ha poi un utilizzo particolare?


EDIT: ho letto meglio cosa hai scritto "i < h_box_down.lenght"; non è che volevi scrivere "i < box_other.length"?

 

[Mario1988]

Ok.


Bene, è già qualcosa di più logico ed accettabile. Se non funziona è possibile che ci siano altri problemi. Dovresti magari eseguire qualche console.log per verificare cosa sta succedendo e cosa non va.

Se poi ti serve aiuto nel capire cosa non va, dovresti postare l'attuale script.

Una domanda: ma qual'è esattamente lo scopo di questa tua funzione? Ho capito che vuoi ottenere la somma delle altezze, ma questo ha poi un utilizzo particolare?


EDIT: ho letto meglio cosa hai scritto "i < h_box_down.lenght"; non è che volevi scrivere "i < box_other.length"?

Si perfetto mi hai capito bene...colpa delle poche ore di sonno...si danno spesso i numeri

Domanda
Setto alcune proprietà dei DIV dai fogli di stile esempio posizione, altezza, ecc. Ora da javascript voglio ottenere i valori precedentemente settati?
Immagina dei DIV con id="box_1", id="box_2", id="box_n" ed una funzione blablabla (["box_1", ..."box_n"]) qual'è il miglior metodo per leggere i valori assegnati alle proprietà?

ho provato con getAttribute ma restituisce un valore se assegnato precedentemente con setAtrtibute, altrimenti mi restituisce null, quindi ne deduco che non legge i valori assegnati direttamente da un foglio di stile CSS

 

[WmbertSea]

Ora da javascript voglio ottenere i valori precedentemente settati?

Come già chiesto prima: c'è un fine pratico a questa tua necessità?
Se spieghi meglio a cosa ti serve, sicuramente viene più semplice, a chi cerca di aiutarti, darti delle soluzioni o dei consigli mirati.

qual'è il miglior metodo per leggere i valori assegnati alle proprietà?

Ti direi: il metodo migliore è "click destro sull'elemento > Ispeziona/Analizza elemento", oppure F12 > scheda "Elementi/Analisi pagina" > scheda "Stili/Regole".
Quello che voglio dirti è che basta aprire la console web del tuo browser e vedere le regole applicate all'elemento in questione, se ti serve giusto sapere quali regole e valori sono applicati a tale elemento. A meno che non ci sia un motivo valido per fare un sistema del genere in JavaScript.