Javascript : mes fonctions "is not defined"

Résolu/Fermé
Cocoto Messages postés 22 Date d'inscription mercredi 3 septembre 2008 Statut Membre Dernière intervention 24 juillet 2011 - 17 avril 2010 à 17:13
Cocoto Messages postés 22 Date d'inscription mercredi 3 septembre 2008 Statut Membre Dernière intervention 24 juillet 2011 - 22 avril 2010 à 09:50
Bonjour à tous.
Je suis nouveau dans le monde de javascript, et dans mes premiers scripts (creation d'une gallerie photo simple), j'ai un petit problème qui se pose :

J'ai un fichier Php qui fonctionne parfaitement, dépourvu de code JS, et un fichier .js.
Mon problème se situe en bas du code (pour les pressés)
function displayPics() 
{ 
    	var liens = document.getElementById('gallerie').getElementsByTagName('a') ; //tableau des liens (contenant les photos)
    	var big_photo = document.getElementById('big_pict') ;
    	var titre = document.getElementById('titre');
	var k=0; //numero de la photo (décalage de 1)
	var lect=0;

	//FONCTION CHANGE IMAGE PRINCIPALE
	function change_img (i) //change l'image, la description, le titre et le Titre affiché
	{
		big_photo.src = liens[i].href; 
        	big_photo.alt = liens[i].title;
        	big_photo.title = liens[i].title;
        	titre.firstChild.nodeValue = liens[i].title;
		return false;
	}

	function avance () //Affiche l'image suivante (utilise change_img)
	{
		if (k>=liens.length-1)//Vérifie que l'on reste dans la liste d'image
		{
			k=0;
		}
		else
		{
			k++;
		}
		change_img(k);
		return false;
	}

	function recule() //Affiche l'image précédante (utilise change_img)
	{
		if (k<=0)//Vérifie que l'on reste dans la liste d'image
		{
			k=liens.length-1;
		}
		else 
		{
			k--;
		}
		change_img(k);
	}
	
	//TRAITEMENT DES MINIATURES
    	for (i = 0 ; i < liens.length ; ++i) 
    	{ 
       		liens[i].onclick = function() 
		{
			change_img(k=this.id-1);//Change K avec prise en compte du système de tableau (0=1)
			return false;
		}
	
    	}
    	//TRAITEMENT DES FLECHES ET DU CLIC SUR l'IMAGE PRINCIPALE 
	document.getElementById('precedant').onclick = function() {recule();}
	document.getElementById('suivant').onclick = function() {avance();}
	big_photo.onclick =function (){ avance ();}
}
window.onload = displayPics; //initialisation de la fonction globale



Mon soucis est que je n'arrive pas a utiliser mes fonctions définies au dessus directement.
Je suis obligé de passer par "function(){}", ce qui est lourd, et illisible dans le cas d'un :
document.getElementById('lecture').onclick=function(setTimeout(function(){avance ();},1000);} 


Sinon, mon navigateur m'indique : Uncaught ReferenceError: avance is not defined
Si quelqu'un a une explication/solution/structure plus "propre"
Pour le reste, la page fonctionne parfaitement, je commence à me pencher sur une fonction "lecture/pause", mais je voudrais nettoyer un peu le code avant et prendre de bonnes habitudes de programmation.
Merci d'avance !

9 réponses

Cocoto Messages postés 22 Date d'inscription mercredi 3 septembre 2008 Statut Membre Dernière intervention 24 juillet 2011 6
19 avril 2010 à 15:37
J'ai refait entièrement mon code en placant les actions dans le HTML, et les fonctions dans un fichier JS déclaré en fin de body.

En utilisant des noms explicites on retrouve une structure lisible.


Merci encore, je place le sujet comme résolut !
A bientôt sur la plate-forme =)
2