Ciao a tutti!
Sto studiando Javascript in maniera un po' più dettagliada del famelico "copiaincolla" a cui mi ero abituato. Stavo quindi tentando di scrivere uno script che generasse una checkbox con delle immagini.
Il risultato però è alquanto strano e non è certo quello che mi aspetto. Non capisco dove stia il mio sbaglio e non credo proprio sia una malinterpretazione dell'interprete!
Questa non è assolutamente una versione definitiva, è totalmente per scopi autodidattici e l'ho semplificata ancora di più per mostrarvi meglio il comportamento che non capisco.
Ho dei seri dubbi di aver interpretato male la catena degli scope, l'ambiente di esecuzione delle funzioni coinvolte o chissà che.. ma poi penso "hey! ma per qualche millisecondo in realtà l'immagine viene cambiata! wtf?). Se riuscite a raccapezzarvi.. vi devo una birra alla prima occazione!
Ecco qui il link per una prova sul vostro browser:
https://dl.dropbox.com/u/1889847/dilemma/documentObj6.html
e qui il famelico codice:
<!--
cliccando il link che contiene l'immagine, cambiera' il src (visualizzandolo) ma per un tempo brevissimo, per poi tornare al src originale.
Qualcuno mi spiega questo comportamento? Cosa sbaglio?
-->
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script>
function ToggleButton(){
this.idToggle= null;
this.checked= null;
this.image= null;
//se e' la prima volta che si istanza questa classe, creiamo varie properties per tutti gli oggetti futuri e definiamo la classe.
if(! ToggleButton.prototype.images){
ToggleButton.prototype.images= {};
ToggleButton.prototype.images["checked"]= new Image();
ToggleButton.prototype.images["checked"].src= "checkY.jpg";
ToggleButton.prototype.images["unchecked"]= new Image();
ToggleButton.prototype.images["unchecked"].src= "checkN.jpg";
//funzioni pubbliche dell'oggetto
ToggleButton.prototype.clickHandler= function(){
//da non spuntato dovrebbe diventare spuntato e rimanerci permanentemente
//this, a rigor di (mia) logica, dovrebbe referenziare l'oggetto ToggleButton che l'ha chiamata (vedi tag <a href>)
this.image.src= this.images["checked"].src;
}
ToggleButton.idToggleButton= 0;
}
//inizializzazione oggetto e varie referenze necessarie
this.idToggle= ToggleButton.idToggleButton++;
this.checked= false;
//creazione dell'oggetto HTML
document.writeln("<img name='toggle" + this.idToggle +"' src=''>");
document.images["toggle" + this.idToggle].toggleObj= this;
this.image= document.images["toggle"+ this.idToggle];
//visualizza checkbox senza spunto
this.image.src= this.images["unchecked"].src;
}
</script>
</head>
<body>
<a href="" onclick="document.images['toggle0'].toggleObj.clickHandler();">
<script>
new ToggleButton();
</script>
</a>
</body>
</html>