elemento preso con getElementById null

[risolto] elemento preso con getElementById null

Ciao ragazzi, sto realizzando una galleria in javascript usando la programmazione ad oggetti, questo è il codice:

Codice:

function galleria(id,indirizziFoto){ this.riquadro = id; this.immagini = indirizziFoto; this.imgAttuale = 0; //l'indice dell'riquadro attuale inizializzato a 0, la prima immagine dell'array riquadro.src = indirizziFoto[0]; this.avanti() = function(){ this.imgAttuale += 1; this.riquadro.src = indirizziFoto[imgAttuale]; }; this.indietro() = function() { this.imgAttuale -= 1; this.riquadro.src = indirizziFoto[imgAttuale]; }; this.mostra(num) = function() { this.imgAttuale += parseInt(num); this.riquadro.src = indirizziFoto[imgAttuale]; }; }

Nella pagina ho delle miniature che se cliccate attivano il metodo mostra, che cambia l'immagine del riquadro che ha l'id grande:

Codice:

<div id=divfoto> <ul> <li><img src=gallerie/DSC_0050.JPG width=110 height=80 onclick=galleria.mostra(0)></li> .....altri tag li </ul> </div> <div id=centrale> <img id=grande src=gallerie/DSC_0050.JPG> </div> </div>

Il problema è che il tag che prendo gon getElementById("grande") risulta null.
Questo è il codice con cui inizializzo la galleria:

Codice:

<script type=text/javascript src=js/galleria.js></script> <script type=text/javascript> immagini=new Array("gallerie/DSC_0050.JPG","gallerie/DSC_0051.JPG"); galleria = new galleria(document.getElementById("grande"),immagini); </script>

Come posso risolvere? Grazie

Comincia con l'aggiungere virgolette a tutti quegli attributi nei tag html. Così senza è un po' rischioso.

La funzione restituisce null perché nel momento in cui la invochi non esiste alcun elemento con l'id "grande".
Devi attendere che DOM sia pronto, ovvero: attendi che la pagina sia stata caricata completamente (onload) o inserisci lo script della galleria prima della chiusura di <body>.

Esistono altri modi più rapidi ed efficienti, ma dato che il tuo script è nativo (cioè non usa nessun framework), non mi sembra una grande idea segnalarti jQuery e del suo metodo .ready...

Ho modificato l'oggetto galleria in questo modo:

Codice:

function galleria(id,indirizziFoto){ this.riquadro = null; this.immagini = indirizziFoto; this.imgAttuale = 0; //l'indice dell'riquadro attuale inizializzato a 0, la prima immagine dell'array //riquadro.src = indirizziFoto[0]; this.init =function() { this.riquadro = document.getElementById(id); } this.avanti() = function(){ this.imgAttuale += 1; this.riquadro.src = indirizziFoto[imgAttuale]; }; this.indietro() = function() { this.imgAttuale -= 1; this.riquadro.src = indirizziFoto[imgAttuale]; }; this.mostra(num) = function() { this.imgAttuale += parseInt(num); this.riquadro.src = indirizziFoto[imgAttuale]; }; }

poi ho modificato il tag body:

Codice:

<body onload=galleria.init()>

ora mi da questi errori:

galleria.init is not a function

this.avanti is not a function

Tra l'altro quest'ultimo non viene mai chiamato nella pagina dove viene chiamata la galleria.
Come posso risolvere? Grazie

risolto, c'erano vari errori di sintassi, ecco il codice funzionante:

Codice:

function galleria(id,indirizziFoto){ this.riquadro = null; this.immagini = indirizziFoto; this.imgAttuale = 0; //l'indice del riquadro attuale inizializzato a 0, la prima immagine dell'array this.init = function() { this.riquadro = document.getElementById(id); }; this.avanti = function(){ this.imgAttuale += 1; this.riquadro.src = indirizziFoto[this.imgAttuale]; }; this.indietro = function() { this.imgAttuale -= 1; this.riquadro.src = indirizziFoto[this.imgAttuale]; }; this.mostra = function(num) { if(this.imgAttuale!=parseInt(num)) { //se l'immagine è la stessa non ricarica la pagina this.imgAttuale = parseInt(num); this.riquadro.src = indirizziFoto[this.imgAttuale]; } }; }

Ora vorrei migliorarla, cosa aggiungereste a questa gallery per renderla più interessante?

Premetto di non averla vista e aver solamente dato uno sguardo qui al codice. Comunque servono: animazioni, una grafica accattivante, navigazione mediante tastiera (frecce direzionali per esempio), e supporto per i dispositivi mobili o più semplicemente per i dispositivi di puntamento a tocco (touchescreen) nei quali l'utente potrebbe aspettarsi di poter cambiare immagine trascinando quella corrente verso il bordo dello schermo.