concatenare variabili JavaScript per selezione elementi

[monday]

Salve a tutti,
volevo porvi un quesito. Premetto che solo da poco ho iniziato a usare JavaScript.


Dovrei selezionare dei collegamenti (tag a) che stanno nel documento HTML tramite JavaScript per applicare su di essi degli effetti.
La situazione della pagina è la seguente:
c'è un div contenitore ('div0') che contiene 3 div ('div1','div2','div3') dove sono i collegamenti che mi interessa selezionare e altri div dove sono altri collegamenti che non mi interessa richiamare.


Avevo pensato di operare nel seguente modo:

x=document.getElementById('div1').getElementsByTagName('a');
y=document.getElementById('div2').getElementsByTagName('a');
z=document.getElementById('div3').getElementsByTagName('a');

e quindi unire le tre variabili x,y,z in un'unica variabile w da richiamare con la funzione JavaScript. Come faccio a unirle?


Ho escluso di lavorare tramite le classi per la selezione degli elementi perchè il comando getElemtsByClassName sembra avere problemi con IE.

[ciro78]

Ciao monday,
benvenuto sul forum. Ti invito a leggere il regolamento. In particolare la sezione che riguarda titoli poco significativi e l'utilizzo del tag code.

in merito al tuo problema non mi è chiaro cosa vuoi realizzare ma in javascript le variabili, e le sringhe, si concatenano con l'operatore +

[monday]

Ciao monday,
benvenuto sul forum. Ti invito a leggere il regolamento. In particolare la sezione che riguarda titoli poco significativi e l'utilizzo del tag code.

in merito al tuo problema non mi è chiaro cosa vuoi realizzare ma in javascript le variabili, e le sringhe, si concatenano con l'operatore +

Per l'utilizzo del tag code, intendi il dover mettere il codice tra i tag [script][/script]?

Comunque il mio problema è quello di selezionare lo stesso tipo di elementi (nel caso in questione i tag 'a') contenuti in specifici ID. Per cui ho pensato di far nel modo scritto nel primo post ovvero con la variabile x scelgo gli elementi 'a' del DIV1, con y quelli del DIV2, con z quelli del DIV3. Poi vorrei creare un'unica variabile (w) a partire da queste 3.

Ho provato a fare così:
[script]
...
var w=(x+y+z)
...
[/script]

ma sembra che questa variabile non si crei, perchè la funzione JavaScript ad essa applicata non va mentre se la applica ad un'altra variabile l'evento viene generato.

[monday]

Ecco la parte di codice che ho scritto, con la quale ho tentato di richiamare gli elementi 'a' dei 3 div e metterli in unico array 'w' al quale applico la funzione. Ma purtroppo tale funzione non riesce ad operare su 'w', temo che ci sia un errore proprio nella definizione di quest'ultimo. Qual è l'errore?

x=document.querySelectorAll("#div1 > a");
y=document.querySelectorAll("#div2 > a");
z=document.querySelectorAll("#div3 > a");
var w=[];
w.push(x);
w.push(y);
w.push(z);
for(i=0;i<w.length;i++){
                w[i].onclick=function(){nomefunzione}
                }

P.S. escludo che sia la funzione il problema perchè agisce in modo corretto su altre variabili

[lucavizzi]

Qual è l'errore?

Non puoi associare una funzione direttamente ad una collezione di elementi del DOM, devi eseguire un loop sulla collezione ed assegnare la funzione al singolo elemento:

x=document.querySelectorAll("#div1 > a");
y=document.querySelectorAll("#div2 > a");
z=document.querySelectorAll("#div3 > a");
var w=[];
w.push(x);
w.push(y);
w.push(z);
for(i=0;i<w.length; i++){
    var collection=w[i];
    for(var j=0; j<collection.length; j++){
        collection[j].onclick=function(){nomefunzione}
    }
}

[monday]

Non puoi associare una funzione direttamente ad una collezione di elementi del DOM, devi eseguire un loop sulla collezione ed assegnare la funzione al singolo elemento:

x=document.querySelectorAll("#div1 > a");
y=document.querySelectorAll("#div2 > a");
z=document.querySelectorAll("#div3 > a");
var w=[];
w.push(x);
w.push(y);
w.push(z);
for(i=0;i<w.length; i++){
    var collection=w[i];
    for(var j=0; j<collection.length; j++){
        collection[j].onclick=function(){nomefunzione}
    }
}

Ho verificato, adesso funziona. Grazie mille

[KillerWorm]

Ciao, quoto lucavizzi in linea generale.

Per semplificare, però, dato che lo stesso metodo querySelectorAll() (vedi documentazione) restituisce una collezione di elementi (cioè un oggetto NodeList che in sostanza funziona come un array) e dato che è possibile specificare più selettori separati da virgola (come il css), potresti usare direttamente tale metodo per ottenere il tuo array, e ciclare direttamente questo, evitando di costruire inutilmente altri array.

Esempio:

var w = document.querySelectorAll("#div1>a, #div2>a, #div3>a");
var i = w.length;
while(i--){
  w[i].onclick = nomefunzione;
}