11548 sujets

JavaScript, DOM et API Web HTML5

Function is not defined? :o

J'obtiens cette erreur lorsque je fais appel a une fonction Js, alors qu'elle est belle et bien définie.


window.addEvent('domready', function(){
[b]
function ouvrir(){[/b]
  function dev(){
     
      $('hori1').morph({

       'opacity': 1,
       'background-color': '#d2ddec',
	'margin-top':'-550px',
	'z-index':9
		
      }).innerHTML='<a href="#"><img  id="lol2" src="haut de page.png"></a>';
	  ;


    };
	};
	[b]function fermer(){[/b]
	$('hori1').addEvent('click', function(){
      // Morphes back to the original style
      $('hori1').morph({
         opacity: 1,
        'background-color': '#c7b299',
         'margin-top':'0px',
	'z-index':4
      }).innerHTML='<a href="#"><img  id="lol" src="haut de page.png"></a>';
	  ;
    });
 
};
});


Les fonctions ouvrir() et fermer(), sont bien définies pourtant.

je fait appel a ces fonctions dans mon html : 
<a href="javascript:ouvrir()"><img  src="haut de page.png"></a>
et
<a href="javascript:fermer()"><img  src="haut de page.png"></a>


Le script js est normalement sur un fichier externe, j'ai essayé en le mettant dans la page html dans le <head> mais ca ne change rien.
Ais-je oublié quelque chose?
Modifié par dqniel (06 Jul 2011 - 20:53)
Tu as oublié la notion de scope présente dans tout les langages de programmation.
En javascript on a un scope au niveau des fonctions, ce qui veux donc dire :


/*
 *
 * ici la fonction "ouvrir" n'existe pas
 *
 */
window.addEvent('domready', function(){ 
  /*
   *
   * ici la fonction "ouvrir" existe
   *
   */
  function ouvrir(){ };
  /*
   *
   * ici la fonction "ouvrir" existe
   *
   */
});
/*
 *
 * ici la fonction "ouvrir" n'existe pas
 *
 */

Modifié par Ywg (07 Jul 2011 - 09:56)
je dois donc creer une variable globale qui contiendrait les fonctions et faire appel a cette variable?

var ouvre= new function ouvrir(){
  function dev(){
      // This morphes the opacity, width and backgroundColor
      $('hori1').morph({

         'opacity': 1,
        'background-color': '#d2ddec',
		
		'margin-top':'-550px',
		'z-index':9
		
      }).innerHTML='<a href="#"><img  id="lol2" src="haut de page.png"></a>';
	  ;


    };
	};

Modifié par dqniel (07 Jul 2011 - 20:32)
Oui cela marchera, mais ce n'est pas propre.

La solution à privilégier est de faire ton binding à l'intérieur du scope où ton handler est déclaré :


window.addEvent('domready', function(){  

  function ouvrir(){ }; 
  
  tonlien.addEvent('click', ouvrir);
  tondeuxiemelien.addEvent('click', ouvrir);
});

Modifié par Ywg (08 Jul 2011 - 17:32)
Sujet clos
Aller à