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

Mario1988

Nuovo Utente
9 Dic 2017
7
0
1
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.
Codice:
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
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

Nuovo Utente
9 Dic 2017
7
0
1
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
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

Nuovo Utente
9 Dic 2017
7
0
1
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
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"?
 
Ultima modifica:

Mario1988

Nuovo Utente
9 Dic 2017
7
0
1
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
 
Ultima modifica:

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
R Vb.net: ottenere valori da campi html .NET Framework 1
A Ottenere sfumatura su testo Photoshop 8
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
F programma che vi permette di ottenere like e followers! senza limiti Annunci servizi di Social Media Marketing 0
A [MySQL] Ottenere più risultati in un unico campo MySQL 7
V [Visual Basic] ottenere info su sistema Visual Basic 1
T Ottenere value slection jQuery 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
S [PHP] ottenere una data da un'altra PHP 4
M ridimensionare un'immagine per ottenere una thumbnail PHP 4
otto9due Rand() o mt_rand() per ottenere risultati alternativi.. non uguali per 3 estrazioni. PHP 5
B Funzione per ottenere una determinata stringa PHP 4
R Ottenere il numero di riga di una tabella mysql contenente un nome specifico PHP 1
F Come ottenere nomi delle tabelle in un database e ciclarli PHP 1
braccobaldo Ottenere l'elemento form da un suo input Javascript 3
otto9due Ottenere link immagine prodotto virtuemart Joomla 0
M RegEX ottenere testo tra due tag PHP 6
M incastonare div per ottenere un effetto puzzle HTML e CSS 8
A Ottenere una stringa da window.prompt Javascript 1
G Individuare parte di un elemento in un array e ottenere la chiave PHP 7
K Come ottenere codice sorgente HTML di una pagina PHP ? PHP 15
Sevenjeak Far ottenere il Focus ad un'elemento Java 5
C AllTrafficSeo - Un nuovo metodo per ottenere referrals/visite Guadagnare col Sito 0
Web Designer Come ottenere un Popup in entrata su MyBB (valido anche per altri CMS) CMS (Content Management System) 0
C Codice html per ottenere finestre in primo piano fisse e a scatta sovrapposte HTML e CSS 35
L ottenere modifiche dinamiche del codice Javascript 3
L Come si puo ottenere il codice sorgente di una pagina web ? PHP 8
G Ottenere il codice Flash di un videogioco on-line Flash 8
E Vorrei ottenere dei pannelli scorrevoli con contenuto dinamico Javascript 0
L ottenere il nome di un componente Javascript 0
jan267 Ottenere la prima lettera di una parola in grassetto Snippet PHP 0
jan267 Ottenere il nome del browser Snippet PHP 0
Lino80 [Retribuito] Cerco programmatore php per modifica/inserimento funzione/valori da un plugin importer wordpress Offerte e Richieste di Lavoro e/o Collaborazione 0
G Invio di più valori con la stessa checkbox PHP 4
M PHP/MySQL - Estrarre valori min e max di ogni gruppo PHP 5
C prendere dei valori da Plugin e inserirli nel database joomla Joomla 0
F Stampare valori di un database PHP 14
T Recupero valori tramite $_GET PHP 4
otto9due Inserire o aggiornare tabella my sql controllando una coppia di valori PHP 7
M Problemi con la stampa dei valori in php PHP 1
M Passaggio Valori checbox in textarea Javascript 1
D passare valori da database sql a php PHP 1
O Recupero valori da listato Javascript 0
R Raggruppare valori array PHP 5
R Estrarre valori duplicati più volte PHP 0
T recupero valori select multipla da android Javascript 3
L estrarre valori max tra più tabelle MySQL 2
MarcoGrazia Valori di ritorno json via ajax non visti. jQuery 1
N VENDITA CORSO DROPSHIPPING LUCA VALORI Altri Annunci 0
A Ottenimento valori presenze istantanee MySQL 8

Discussioni simili