Con il ciclo ci siamo e anche su questo passaggio:
ma per il resto non ci siamo. Hai fatto un po' un miscuglio delle altre cose, ovviamente non può funzionare.
Come già detto, ti mancano chiaramente quelle nozioni principali sulla programmazione orientata agli oggetti per poter comprendere a livello concettuale come poter impostare questa roba. Inutile andare a tentoni, per me diventa controproducente.
Ripeto, dovresti iniziare quanto prima a consultare qualche guida di base. In questo stesso portale ci sono vari
articoli, tutorial e delle valide guide, vedi ad esempio
questa guida completa di JavaScript. Nel limite del possibile cerco di riepilogare alcuni punti fondamentali che ti aiuteranno (spero) a capire i meccanismi per poter approntare un qualsivoglia script come quelli che stai cercando di impostare in questa discussione.
Qui le nozioni essenziali riguardo la programmazione ad oggetti in JavaScript (clicca sui link per approfondire i vari argomenti):
- JavaScript è un linguaggio
OOP, gli oggetti sono la cosa fondamentale. La maggior parte delle cose in JavaScript sono oggetti.
- Ogni oggetto è un'istanza di una
classe. La classe non è altro che il modello astratto su cui sono definite le caratteristiche e le funzionalità dei relativi oggetti (istanze di tale classe).
- Un oggetto è sostanzialmente un recipiente che può contenere
proprietà e metodi. Tutti gli elementi del
DOM (cioè gli elementi relativi ai nodi del documento HTML) in JavaScript sono rappresentati come degli oggetti, ognuno dei quali possiede svariate proprietà e metodi.
- Una proprietà di un oggetto non è altro che una
variabile definita per tale oggetto, la quale può contenere dei dati di qualsiasi tipo, ad esempio una stringa testuale, un valore numerico, un valore booleano, un array, ecc. Una proprietà può inoltre essere a sua volta un oggetto che potrà quindi contenere proprietà e metodi.
- Un metodo di un oggetto è semplicemente una funzione definita per tale oggetto, cioè un blocco di codice incaricato a compiere delle azioni quando lo si richiama. In JavaScript
la funzione stessa è un oggetto dotato anch'esso di proprietà e metodi.
- Un metodo (proprio come una funzione) tra le sue mansioni può avere quella di restituire qualcosa (che può essere un qualsiasi tipo di dato, anche un oggetto).
- Un metodo è definito come
gestore di evento (in inglese "event handler" o semplicemente "handler" o "listener") quando questo viene eseguito al verificarsi di un determinato
evento. Per gli elementi del DOM possono verificarsi svariati
tipi di eventi. Si ha, ad esempio, l'evento click, load, keypress e molti altri, e per ognuno di questi esiste un corrispettivo gestore (onclick, onload, onkeypress, ecc.). Ogni metodo "gestore di evento" è quindi una funzione definita su un oggetto, la quale viene eseguita quando si verifica un determinato evento.
Una piccola nota: comunemente si utilizza il termine "evento" per riferirsi in genere al "gestore" di tale evento. Ad esempio quando si trova scritto "l'evento onclick" chiaramente è inteso che ci si sta riferendo al "gestore onclick" (relativo all'evento click).
- In JavaScript esistono degli
oggetti nativi tra cui "window" e "document".
- L'oggetto
window è quello principale che rappresenta l'intera finestra in cui è caricata la pagina HTML, ed è il livello base (globale) dal quale "parte" l'esecuzione dello script.
- L'oggetto
document è in realtà una proprietà di window che rappresenta il nodo principale del contenuto HTML caricato nella pagina. Questo oggetto possiede varie proprietà e metodi utili per accedere e manipolare qualsiasi elemento del DOM presente nella pagina.
- Ultimo punto importante (per il momento) è il concetto di
scope (cioè il contesto di visibilità delle variabili che sono definite ed accessibili in un particolare punto dentro lo script) e l'uso della parola chiave
this (un oggetto che fa riferimento all'elemento che definisce lo scope stesso, cioè il contesto corrente su cui è eseguito un qualsiasi blocco di script).
---
Queste sono le basi da avere bene a mente quando si programma in JavaScript. Applicandole agli esempi in questione possiamo constatare alcune cose:
- document è un oggetto che ha proprietà e metodi
- Un metodo di document è
getElementsByClassName(). Tale metodo seleziona una serie di elementi del DOM e restituisce un oggetto di tipo
NodeList,
- Un oggetto NodeList è una collezione di nodi HTML (cioè elementi del DOM). E' possibile "navigare" un tale oggetto così come lo si fa per un array.
- Un oggetto NodeList ha delle proprietà e dei metodi. Una sua proprietà ad esempio è "lenght" che (così come un array) indica il numero di membri (nodi) presenti nell'oggetto stesso. Per questo nel tuo script (in cui definisci
arrow come un oggetto NodeList) puoi scrivere
arrow.lenght e usare tale valore per limitare il numero di iterazioni del tuo ciclo. Il ciclo si ripete infatti per il numero di elementi contenuti in
arrow. Inoltre (proprio come un array) puoi usare un indice per far riferimento a ciascuno dei suoi elementi, per questo puoi scrivere
arrow[i], dove
i è la variabile numerica che viene incrementata nel ciclo.
- Un oggetto NodeList ha dei metodi utili per "navigare" gli elementi al suo interno. Non possiede un evento "click" e relativo metodo "onclick". Un oggetto NodeList infatti non è, di per sé, un elemento cliccabile come lo sono invece gli elementi del DOM. Per ogni elemento del DOM è possibile infatti impostare un gestore "onclick". Per questo nel tuo script non ha senso scrivere
arrow.onclick = function() { ... dal momento che
arrow è un oggetto NodeList
- Il metodo "onclick" lo devi definire invece per gli elementi contenuti nell'oggetto NodeList. Per questo avrebbe senso scrivere, dentro il ciclo, una cosa come
arrow[i].onclick = function() { ... , cosa che non hai fatto.
- Ancora, il metodo "onclick" deve essere definito come funzione (che appunto gestisce l'evento "click"), non ha quindi delle sue proprietà. Per questo non ha senso scrivere
arrow[i].onclick.this.style.transform...
- Quindi, ogni elemento dell'oggetto NodeList rappresenta il relativo elemento selezionato del DOM. Ognuno dei quali non è altro che un oggetto che possiede proprietà e metodi.
- Ogni elemento del DOM possiede una
proprietà style che a sua volta è un oggetto di tipo
CSSStyleDeclaration il quale possiede altre svariate proprietà relative ai corrispettivi attributi CSS. Queste sono principalmente proprietà di tipo stringa con cui è possibile impostare ogni corrispettivo attributo CSS relativo all'elemento in questione. Per questo nell'esempio della guida è scritto
x[i].style.transform = 'rotate(180deg)'; dove
x[i] rappresenta ogni singolo elemento DOM appartenente all'oggetto
x (che appunto è un NodeList). Ma nel tuo script quel CSS dovrai impostarlo, non tanto appena è eseguito il ciclo, ma bensì dentro il gestore "onclick".
- Dentro la funzione definita per onclick, puoi usare l'oggetto this come identificatore dell'elemento da cui è scaturito l'evento click (quindi l'elemento da cui è stato invocato il metodo gestore onclick). Per cui nel tuo script potrai ad esempio scrivere, dentro tale funzione,
this.style.transform = ...
---
Questo è quanto. E' un bignami della programmazione JavaScript ma senza dubbio bisogna studiare ed approfondire i vari punti prima di iniziare a scrivere con criterio qualche riga di script. Non ci sono troppe alternative.
Di più non posso contribuire, spero di aver chiarito qualcosa in più per il momento.
Fai qualche prova cercando di seguire tali indicazioni, cercando di fare tuoi questi concetti.
Fai sapere i tuoi eventuali progressi.
Buon proseguimento.