[POO] Récupération d'Events OnClick .

**stego555** · 21/01/2008, 17h18

Bonjour, je travaille sur googlemap et j'ai quelques problémes à récupérer les événements liés à un bouton ou à une checkbox.

Le code est simplifié mais la structure et l'ordre est le même.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html xmlns="http://www.w3.org/1999/xhtml">
<body onload="initialize()" onunload="GUnload()"><!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>TEST WEB Proto</title>
 
<script type="text/javascript">
 
 
function clickVectorCheckbox() { alert("clickVectorCheckbox"+mavariable); }
function clickDLUCheckbox()    { alert("clickDLUCheckbox"+mavariable);    }
 
function initialize() { if (GBrowserIsCompatible()) {
 
var mavariable; 
 
function ClickMoulinette()     { alert("La moulinette va démarrer !! regarder en bas de page"); }
 
} } // end of initialize
 
  </script>
  </head>
        <table cellpadding="0" cellspacing="0" width="100%">
				<tbody><tr>							
                        <INPUT TYPE="CHECKBOX" NAME="VECCHECKbox" ID ="VECCHECK" VALUE=0 UNCHECKED ONCLICK="clickVectorCheckbox()">SHOW VECTOR Layer									
                        <input type="checkbox" name="DLUCHECKbox" id ="DLUCHECK" value=0 UNCHECKED onClick="clickDLUCheckbox()">SHOW DLU Layer 
				</tr></tbody>
	   </table>
 
    <input type="button" name="bouton2" value="click me!!" onClick="ClickMoulinette();" >
    <input TYPE="BUTTON" NAME="bouton3" value="click me2!!" onClick="ClickMoulinette();" />    
 
</body> </html>

Je déclare plusieurs fonctions, qui ensuite doivent être appellées si l'on clique sur les boutons ou les checkboxes ; OR seul les fonctions définies en dehors la fonction (initialize) sont appellées ???

Le seule probléme est que ces fonctions doivent pouvoir avoir accés et appellés des objets définis dans "initialize" (comme l'objet mavariable)

Quelqu'un peut m'aider ? il me manque pas grand chose, et je tourne en rond avec ce probléme depuis 2 jours. Merci pour vos lumiéres

Il doit s'agir d'un probléme de portée et de vizu des fonctions et variables, mais je n'ai rien trouvé dans la doc qui en parle :o ... aussi j'espére avoir quelques éclairciement. Merci d'avance.
Coding is thinking

**le_chomeur** · 21/01/2008, 17h39

a ce que je vois ta "fonction" initialize est en fait un objet

utilise donc des accesseurs pour retourner ou assigner les valeurs de tes variables à l'intérieur de ta méthode

et n'oublis pas de l'initialiser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var myInitialise = new initialize();
 
function initialize() { if (GBrowserIsCompatible()) {
 
var mavariable;
 
function ClickMoulinette() { alert("La moulinette va démarrer !! regarder en bas de page"); }
 
} } // end of initialize

tu pourras ensuite utiliser tes méthodes a l'intérieur : myInitialise.ClickMoulinette();

Bon courage

**stego555** · 21/01/2008, 18h39

Merci pour ta réponse qui m'éclaircie un peu, mais cela ne marche pas d'avantage : cad, que quand on click sur les boutons ou les checkboxes, aucune des fonctions n'est appellée...
est-ce parce que la variable est déclarée dans Initialize() ? je ne comprends pas pourquoi les fonctions ne sont pas appellés ???? ...
encore besoin de lumiére

Merci
ps : j'ai init la variable ... et déclaré comme conseillé ...

**le_chomeur** · 22/01/2008, 10h46

Salut

alors je t'ai préparé un petit exemple pour te montrer la portée des variables

il est très succint mais je pense qu'il t'aidera a comprendre ton erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>portée des variables</title>
<script type="text/javascript">
 
 
function porteVariable()
{
	try{
		alert(mavariable);
	}
	catch(e){
		alert(e);
	}
}
 
function porteVariableTrue()
{
	try{
		var myInitialize = new initialize();
		alert(myInitialize.getMavariable());
	}
	catch(e){
		alert(e);
	}
}
function initialize() { 
		var mavariable = "titi";
 
		this.setMavariable = function(valeur)
							{
								mavariable = valeur;
							}
		this.getMavariable =function(){
								return mavariable;
							}
		//appelé à l'instanciation de mon objet					
		alert(mavariable);
} // end of initialize
 
 </script>
</head>
 
<body>
<input type="button" value="voir ma variable" onClick="porteVariable()" >
<input type="button" value="vraiment voir ma variable" onClick="porteVariableTrue()" >
</body>
</html>

n'hésite pas si tu ne comprend pas qq chose ^^

**stego555** · 30/01/2008, 14h41

Je crois que j'ai mieux compris la portée (et limitation) dans javascript, mais toujours pas ce que je veux. J'ai fait un exemple super simple avec googlemaps pour montrer le pbl de m... que j'ai depuis 15 jours !!!!
Et aprés on dit que c'est une science lol mdr;

Voici, un petit exemple qui ne fonctionne pas

----------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TEST WEB Proto</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">

var map;
var myInitialize = new initialize();

function clickVectorCheckbox() { myInitialize.myLoadData(); }
function pushMyButton() { myInitialize.mySaveData(); }

function initialize() { if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map_canvas"),{draggableCursor:"crosshair"});
this.myLoadData = function() { alert("LoadData"); }
this.mySaveData = function() { alert("SaveData"); }
map.setCenter(new GLatLng(22.29,114.17), 14);
}}
</script> </head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 80%; height: 80%"> </div>
<div>
<form name="form_1" action="">
<input type="checkbox" name="VECCHECK" id="VECCHECK" value="VEC" checked=checked onclick="clickVectorCheckbox();"> SHOW VECTOR Layer
<input type="button" name="Save_Button" id="Save_Button" value="Save Data" onclick="pushMyButton();">
</form>
</div></body></html>
----------------------------------------------------

et je ne comprend PAS javascript (c'est pas logico mathématique) et juste avant, le bouton fonctionnait, mais plus maintenant .. Pourquoi ? hum je recommence à m'énnerver ...

Autre petite question : comment mettre la checkbox à faux dés le début ?

**stego555** · 30/01/2008, 14h42

Je crois que j'ai mieux compris la portée (et limitation) dans javascript, mais toujours pas ce que je veux. J'ai fait un exemple super simple avec googlemaps pour montrer le pbl de m... que j'ai depuis 15 jours !!!!
Et aprés on dit que c'est une science lol mdr;

Voici, un petit exemple qui ne fonctionne pas

----------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TEST WEB Proto</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">

var map;
var myInitialize = new initialize();

function clickVectorCheckbox() { myInitialize.myLoadData(); }
function pushMyButton() { myInitialize.mySaveData(); }

function initialize() { if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map_canvas"),{draggableCursor:"crosshair"});
this.myLoadData = function() { alert("LoadData"); }
this.mySaveData = function() { alert("SaveData"); }
map.setCenter(new GLatLng(22.29,114.17), 14);
}}
</script> </head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 80%; height: 80%"> </div>
<div>
<form name="form_1" action="">
<input type="checkbox" name="VECCHECK" id="VECCHECK" value="VEC" checked=checked onclick="clickVectorCheckbox();"> SHOW VECTOR Layer
<input type="button" name="Save_Button" id="Save_Button" value="Save Data" onclick="pushMyButton();">
</form>
</div></body></html>
----------------------------------------------------

et je ne comprend PAS javascript (c'est pas logico mathématique) et juste avant, le bouton fonctionnait, mais plus maintenant .. Pourquoi ? hum je recommence à m'énnerver ...

Autre petite question : comment mettre la checkbox à faux dés le début ?

**stego555** · 30/01/2008, 17h06

voici un code qui fonctionne et fait ce que je voulais, mais il n'y a plus du tout de déclaration de l'objet initialize et ça marche

n'importe nawak, pff; voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>VOLCANO WEB Proto</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
 
var map;
 
function initialize() { if (GBrowserIsCompatible()) {
 
    map = new GMap2(document.getElementById("map_canvas"),{draggableCursor:"crosshair"});
    map.setCenter(new GLatLng(22.29,114.17), 14);
 
    SaveData = function()   {  alert("SaveData");   }
    clickDLUCheckbox = function() { alert("checkdata"); }
} }
</script> </head>
 
<body onload="initialize()" onunload="GUnload()">    
<div id="map_canvas" style="width: 80%; height: 80%">   </div>
<div>
            <form name="form_1" action="">
            <input type="checkbox"  id="DLUCHECK"  onclick="clickDLUCheckbox();"> SHOW DLU Layer
            <input type="button"  id="Save_Button" value="Save Data" onclick="SaveData();" />
        </form>
</div>
</body>
</html>

et bon va comprendre, moi j'arrêtte ...
J'avais posé la question et l'on m'avait dit que cela ne se faisait pas !!! qu'il fallait faire autrement !!! puaaahhhh

[POO] Récupération d'Events OnClick .

JavaScript

Vue hybride

Discussions similaires

Partager

Partager