Javascript : mes fonctions "is not defined" [Résolu/Fermé]

Signaler
Messages postés
23
Date d'inscription
mercredi 3 septembre 2008
Statut
Membre
Dernière intervention
24 juillet 2011
-
Cocoto
Messages postés
23
Date d'inscription
mercredi 3 septembre 2008
Statut
Membre
Dernière intervention
24 juillet 2011
-
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

Messages postés
23
Date d'inscription
mercredi 3 septembre 2008
Statut
Membre
Dernière intervention
24 juillet 2011
6
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 87675 internautes nous ont dit merci ce mois-ci


Si tu veux utiliser une fonction, tape simplement
mafonction();
Messages postés
2120
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
4 novembre 2019
222
Pourquoi tes fonctions sont-elles définies à l'intérieur d'une autre fonction (displayPics) ?
Je pense que ça vient de là, sort tes variables, qui deviendront alors globales et tes fonctions.
Messages postés
23
Date d'inscription
mercredi 3 septembre 2008
Statut
Membre
Dernière intervention
24 juillet 2011
6
Si je test la ligne :

document.getElementById('precedant').onclick = recule();

Uncaught ReferenceError: recule is not defined
Messages postés
23
Date d'inscription
mercredi 3 septembre 2008
Statut
Membre
Dernière intervention
24 juillet 2011
6
Pour comprendre un peu d'où vient mon problème, j'ai creer une page très simple et fait plusieurs test :

PAGE HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>TEST JAVASCRIPT</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="test2.js"></script>
    </head>
	<body>
		<div id="btn"> BOUTON </div>
		<img id='big_pict' src="http://photos.5sens.fr/imagehp/photo1.jpg" />	

	</body>

C'est donc une page simple avec un div de text et une image
L'intégration du javascript est dans le HEAD

Ici, c'est mon JS fonctionnel :


function main() 
{
	document.getElementById('btn').onclick =function(){document.getElementById('big_pict').src='http://www.google.fr/intl/fr_fr/images/logo.gif';}
}
window.onload = main;


Un test plus "propre d'écriture" :

function main() 
{
	document.getElementById('btn').onclick = "document.getElementById('big_pict').src='http://www.google.fr/intl/fr_fr/images/logo.gif'"
}
window.onload = main;

Cette fois-ci le code ne retourne aucune érreure (console de dev google chrome), mais il ne se passe rien.

Quand je retire la fonction main :


document.getElementById('btn').onclick = function(){document.getElementById('big_pict').src='http://www.google.fr/intl/fr_fr/images/logo.gif'}


J'ai une erreur de type :
Uncaught TypeError: Cannot set property 'onclick' of null
Donc le script ne semble pas trouver mon div

Et enfin le même code sans la fonction, qui me donne la même erreur :


document.getElementById('btn').onclick = "document.getElementById('big_pict').src='http://www.google.fr/intl/fr_fr/images/logo.gif'"


j'ai beau chercher, je ne vois pas pourquoi je doit créer une fonction main pour exécuter du code (même un alert), et pourquoi je doit utiliser une fonction "inutile"...
La déclaration ne doit pas se faire dans le head ???? Merci de m'aider...
Messages postés
2120
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
4 novembre 2019
222
Si tu essaie de modifier des éléments graphiques avant que ceux ci soit chargés, ben l'interpréteur ne trouve rien.
Dans le cas où tu définie une fonction main son appel ne se fait qu'une fois la page chargée (window.onload) donc ça marche.
Il suffit que tu déplaces la position du script dans l'arbre html pour que ça fonctionne, passe le juste avant la fermeture de la balise body par exemple.
;-) Flachy Joe ;-)
Membre de l'association Olympe-Network
Ma clef PGP publique est disponible dans mon profil.
Messages postés
23
Date d'inscription
mercredi 3 septembre 2008
Statut
Membre
Dernière intervention
24 juillet 2011
6
Merci pour l'indiaction, appeler mon javascript à la fin du body fonctionne maintenant.
Mais pour mon problème de "function()" obligatoire, le problème persiste.

Quand je fait un document.getElementById("photo").onclick="alert('test')"

Je doit passer par document.getElementById("big_pict").onclick=function(){alert('test')}

Remarque : dans le html, si j'ajoute le parametre onclick="alert('test')" à mon image cela fonctionne...

J'ai tester ce script :
var n=0;
document.getElementById("photo").onclick=n++;
document.getElementById("btn").onclick=function(){alert(n)};

Et le clic sur le bouton m'affiche 1 quelques soit mes actions antérieures.

Il exécute donc le n++ au démarrage mais pas lors du clic.
Je doit donc passer par une fonction, ou directement dans le html.

Il est plus propre de coder html+js, ou séparer strictement ces 2 fichiers ?
Messages postés
2120
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
4 novembre 2019
222
En effet les variables évènement demandent une fonction, donc
- onclick = "du texte" n'est pas valable
- onclick = n++ est vu comme onclick = 1 ce qui n'a aucun sens non plus.
quand tu le met dans le html ça fait comme si tu définissait onclick = function(){eval("texte du paramètre html");}
Messages postés
23
Date d'inscription
mercredi 3 septembre 2008
Statut
Membre
Dernière intervention
24 juillet 2011
6
Ok merci. Tout s'éclaire =)