elemento preso con getElementById null

25-10-2012, 23.37.01

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

**dreadnaut** · 26-10-2012, 00.38.09

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

**javascripter** · 26-10-2012, 09.48.26

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...

26-10-2012, 13.54.31

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

26-10-2012, 18.38.51

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?

**karl94** · 26-10-2012, 19.04.56

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.

Discussione: elemento preso con getElementById null

LinkBack

Strumenti discussione

Display

[risolto] elemento preso con getElementById null

Regole di scrittura