Javascript - valeur div/span

Version imprimable

12/04/2014, 16h39
Web-Greg

Javascript - valeur div/span
Bonjour,

J'ai un problème avec javascript :

J'utilise la géolocalisation html5 dans un 1er script sur ma page, ce qui m'intéresse c'est 'Latm' & 'LongM' ici :
Code:

1 2 document.getElementById("LatM").innerHTML = position.coords.latitude; document.getElementById("LongM").innerHTML = position.coords.longitude;
que j'affiche comme ça :
Code:

1 2 Lat : <span id="LatM"></span> Long : <span id="LongM"></span>
ou en <div id=LatM></div>

J'aimerais récupérer les valeurs des 'span id' pour les injecter dans un 2eme script sur la même page, mais je n'obtiens rien de valable (des null, des objetHTMLSpanElement....)

Avez vous une solution ?
Merci d'avance

ps : j'ai essayé quelque chose comme ça mais sans résultat ->

Code:

X = document.getElementById("LatM").value;
12/04/2014, 16h46
Auteur

bonjour;

Citation:

Code:

X = document.getElementById("LatM").value

pourtant tu as écrit la réponse dans ta question :)

Code:

X = document.getElementById("LatM").innerHTML
12/04/2014, 17h13
Web-Greg

Je dois faire une erreur quelque part parce qu'avec X = document.getElementById("LatM").innerHTML j'obtiens [object HTMLSpanElement]

edit : LatM et LongM sont dans function successCallback(position) - Est ce que ça a une incidence ?
12/04/2014, 17h24
Auteur
Code:

1 2 3 4 5 6 <body onload="alert(document.getElementById('LatM').innerHTML)"> <div> <span id="LatM">Blabla</span> </div> </body>
affiche "blabla" dans une boite de dialogue.

Citation:

Envoyé par Web-Greg

edit : LatM et LongM sont dans function successCallback(position) - Est ce que ça a une incidence ?

Tout dépend de ce que fait cette fonction. On peut voir les codes HTMl et javascript ?

Quand j'essaye d'afficher <div id="LatM"></div>, j'obtiens bien la Latitude (je suis bien géolocalisé)

le 1er script (géolocalisation html5):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (navigator.geolocation)
var watchId = navigator.geolocation.watchPosition(successCallback,
                                  errorCallback,
                                  {enableHighAccuracy:true,
                                  timeout:100000,
                                  maximumAge:0});
								  else
  alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
 
function successCallback(position){
      document.getElementById("LatM").innerHTML = position.coords.latitude;
      document.getElementById("LongM").innerHTML = position.coords.longitude;
     };  
};

Le second script est une succession de calcul :

// je récupère des données :

Code:

1
2
3
4
5
var Lat1 = 43.846839;
var Long1 = 5.107955;
 
X = document.getElementById("LatM").innerHTML; 
Y = document.getElementById("LongM").innerHTML;

et ensuite mon calcul qui me sert à placer un point sur une image...

En bas de page, j'affiche le résultat du 1er script :

Code:

1
2
    Lat : <span id="LatM"></span>
    Long : <span id="LongM"></span>

et le résultat de mon second script :

Code:

1
2
document.write('Lat1 : '+ Lat1+'<br>');
document.write('Long1 : '+ Long1+'<br>');

Citation:
Envoyé par Web-Greg
Quand j'essaye d'afficher <div id="LatM"></div>, j'obtiens bien la Latitude (je suis bien géolocalisé)

le 1er script (géolocalisation html5):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 if (navigator.geolocation) var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, {enableHighAccuracy:true, timeout:100000, maximumAge:0}); else alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5"); function successCallback(position){ document.getElementById("LatM").innerHTML = position.coords.latitude; document.getElementById("LongM").innerHTML = position.coords.longitude; }; };
je ne porterai pas de jugement sur cette première partie car ces sont des choses que je ne connais pas. Le seul point qui m'intrigue c'est la variable position qui est passée en paramètre à ta fonction successCallback.
Citation:
Envoyé par Web-Greg
Le second script est une succession de calculs:

// je récupère des données :
Code:

1 2 3 4 5 var Lat1 = 43.846839; var Long1 = 5.107955; X = document.getElementById("LatM").innerHTML; Y = document.getElementById("LongM").innerHTML;
et ensuite mon calcul qui me sert à placer un point sur une image...
là il faut que tu gardes à l'esprit que innerHTML retourne une chaine de caractères. Donc si tu veux réaliser des calculs il faut transformer ces chaines en nombres :
Code:

1 2 3 4 5 6 7 var Xstr, Ystr; var X, Y; Xstr = document.getElementById("LatM").innerHTML; // chaine de caractères Ystr = document.getElementById("LongM").innerHTML; // chaine de caractères X = parseFloat(Xstr); // conversion en nombre flottant Y = parseFloat(Ystr); // conversion en nombre flottant // tes calculs
Citation:
Envoyé par Web-Greg
et le résultat de mon second script :
Code:

1 2 document.write('Lat1 : '+ Lat1+'<br>'); document.write('Long1 : '+ Long1+'<br>');
ah... document.write(). Cette fonction est assez particulière et pose souvent des problèmes.
Est-ce que tu appelles cette méthode dans une fonction javascript déclarée entre les balises <head> de ta page ? Si oui, la source de ton problème est là.
Je t'invite à lire ce billet de Bovino à propos de cette fonction. Comprendre document.write en javascript

Maintenant, je ne peux en dire plus car je ne sais pas comment sont organisés ton javascript et HTML dans ta page.

Merci pour ton aide !! Et merci pour le .innerHTML, je ne savais pas.

Je viens de faire un test avec :
Code:

1 2 3 4 5 6 7 var Xstr, Ystr; var X, Y; Xstr = document.getElementById("LatM").innerHTML; // chaine de caractères Ystr = document.getElementById("LongM").innerHTML; // chaine de caractères X = parseFloat(Xstr); // conversion en nombre flottant Y = parseFloat(Ystr); // conversion en nombre flottant // tes calculs
ça me retourne :

LatM : undefined
LongM : undefined

Comme tu le dis, je pense que le soucis vient de la variable position qui est passée en paramètre à la fonction successCallback.
Je trouve étrange que ça s'affiche avec un div alors qu'il n'y a pas de réponse quand on l'appelle dans le second script :-/

Je me sers des document.write pour avoir un aperçu des résultats des calculs, je vais peut être les virer si ça pose problème...

Une autre question d'ailleurs : Mon calcul (une simple regle de 3 pour convertir les coordonnées gps en pixels), une fois qu'il sera opérationnel me renvoi : Lmarker et Hmarker. Dans mon html, j'affiche une image et par dessus j'appelle un point qui definie ma position. Ce point est sous cette forme

Code:

<li data-marker-left="Lmarker" data-marker-top="Hmarker">

J'imagine que ce serait trop simple sous cette forme, comment reporter le résultat de mon calcul dans le corps de ma page html ?

12/04/2014, 23h05
Auteur

Pour déverminer ton code procède par étapes. Déjà, supprime le document.write() qui va pourrir ta page, remplace le par des alert().

Essaye une géolocalisation "simple" : pas de calcul, affiche simplement les coordonnées et le code de ta page HTML est réduit au minimum avec les 2 span pour la latitude et la longitude. J'ai trouvé ce tutoriel sur dvp :
http://debray-jerome.developpez.com/...tion-en-html5/

Je remarque les fonctions successFunction, errorFunction, etc. sont déclarées avant l'appel à l'API de géolocalisation navigator.geolocation. (voir II).
Voici les spécifications du W3C sur cet API : http://www.w3.org/TR/geolocation-API/

Bonjour,

J'ai essayé avec un code simple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script> function Geolocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handlePosition); } else { document.getElementById("status").innerHTML = "HTML5 Geolocation is not supported in your browser."; } } function handlePosition(position) { var LatM = position.coords.latitude; var LongM = position.coords.longitude; var acc = position.coords.accuracy; document.getElementById("pos").innerHTML = "Votre position : "; document.getElementById("LatM").innerHTML = "latitude : " + LatM; document.getElementById("LongM").innerHTML = "longitude : " + LongM; document.getElementById("acc").innerHTML = "accuracy : " + acc + " m"; } </script>
Ça fonctionne, je récupère bien ma latitude et ma longitude :
Code:

1 2 <span id="LatM"></span><br> <span id="LongM"></span><br>
J'ai du ajouter body onload="Geolocation();" pour un résultat.

Prochaine étape, ajouter LatM & LongM dans le 2eme script : LatM : undefined :calim2:

edit : en fait j'ai l'impression que mon problème depuis le début est la récupération des span. Les 2 scripts marchent bien séparément mais impossible de récupérer les valeurs de LAtM dans le second script (le calcul)

13/04/2014, 15h30
Auteur

La première étape est franchie et le code valide.

Montre nous maintenant le code complet de ce second script. Il n'y a pas de raison que tu ne puisses pas récupérer les valeurs.

Merci encore !!

1er script :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <!-- Géolocalisation -->
<script>
function Geolocation() {		
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(handlePosition);
	} else {
		document.getElementById("status").innerHTML = "HTML5 Geolocation is not supported in your browser.";
	}		
}
function handlePosition(position) {
	var LatM = position.coords.latitude;
	var LongM = position.coords.longitude;
	var acc = position.coords.accuracy;
	document.getElementById("pos").innerHTML = "Votre position : ";
	document.getElementById("LatM").innerHTML = "latitude : " + LatM;
	document.getElementById("LongM").innerHTML = "longitude : " + LongM;
	document.getElementById("acc").innerHTML = "accuracy : " + acc + " m";
 
}
</script>
	<!-- /Géolocalisation -->

2eme script :

Code:

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
	<!-- Calcul -->
<script type="text/javascript">
    var Lat1 = 43.846839;
	var Long1 = 5.107955;
 
	var Lat2 = 43.844239;
	var Long2 = 5.112307;
 
	var imgwidth = 836;
	var imgheight = 667;
 
 
	//var Xstr, Ystr;
	//var X, Y;
	//Xstr = document.getElementById("LatM").innerHTML;       // chaine de caractères
	//Ystr = document.getElementById("LongM").innerHTML;    // chaine de caractères
	//X = parseFloat(Xstr);     // conversion en nombre flottant
	//Y = parseFloat(Ystr);      // conversion en nombre flottant
	var X = 43.8453794;
	var Y = 5.1101713;
	//var  X = LatM;
	//var  Y = LongM;
 
 
	//if (LongM<Long1 && LongM>Long2) {alert("Vous n'êtes pas dans la zone !");}
	//else {Hmap= Math.abs(Long2 - Long1);}
	var Hmap = Math.abs(Long2 - Long1);
 
	//if (LatM<Lat1 && LatM>Lat2) {alert("Vous n'êtes pas dans la zone !");}
	//else {Lmap= Math.abs(Lat2 - Lat1);}
	var Lmap= Math.abs(Lat2 - Lat1);	
 
	var LPosRel = Math.abs(Y - Long1);
	var HPosRel = Math.abs(X - Lat1);
 
	var ResL = LPosRel / Hmap;
	var ResH = HPosRel / Lmap;
 
	var Lmarker = ResL * imgwidth;    // résultat en pixel pour placer le Marker sur l'image.
	var Hmarker = ResH * imgheight;
 
</script>	
<!--   /calcul   -->

Dans la page en html, j'appelle le Marqueur sur mon image comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- MARQUEUR POSITION --> 
			<li 
			data-marker-type="tooltip" 
			data-show-content="yes" 
			data-reg-point="centerbottom" 
			data-marker-normal-state-path="marker1.png" 
			data-marker-selected-state-path="marker1-rollover.png" 
			data-marker-left="Lmarker"    <!-- Ici résultat en pixel --> 
			data-marker-top="Hmarker" 
			data-marker-width="28" 
			data-marker-height="36" 
			data-show-after-zoom-factor="0">
				<div class="InfoDiv">Vous etes ici</div>
			</li>            
            <!-- --FIN POSITION -->

13/04/2014, 15h43
Auteur

le second script n'est pas dans une fonction ????
13/04/2014, 15h50
Web-Greg

au départ si, j'avais englobé tout le calcul dans une function calcul() .

Je l'ai pas copier dans le msg précédent car je suis loin d’être sur de moi sur ce coup là :-/

Je viens de voir quelque chose. Dans la 1ère partie du script tu as écrit :
Code:

1 2 3 4 document.getElementById("pos").innerHTML = "Votre position : "; document.getElementById("LatM").innerHTML = "latitude : " + LatM; document.getElementById("LongM").innerHTML = "longitude : " + LongM; document.getElementById("acc").innerHTML = "accuracy : " + acc + " m";
or si ensuite tu fais par exemple un document.getElementById("LongM").innerHTML tu récupères tout le texte contenu dans le span à savoir

Citation:

longitude : 5.1101713

et dans ce cas le résultat du parseFloat() sera NaN (not a number) ce qui est normal puisque tu as du texte ("longitude : ") en plus du nombre ("5.1101713").

13/04/2014, 16h27
Web-Greg

ok merci, 1er erreur rectifiée...

mets ton 2nd script dans une fonction qui sera appelée lorsque tu cliqueras sur un bouton. Après chaque résultat place un alert() pour vérifier le contenu de tes variables.
Code:

1 2 var ResL = LPosRel / Hmap; var ResH = HPosRel / Lmap;
Pour ces deux lignes de code, ajoute peut-être un test sur Hmap et Lmap car si ces valeurs sont nulles le script va planter.

Ensuite réactive le getElementById() en faisant attention où tu placeras les commentaires.
Code:

1 2 3 4 5 6 7 8 9 10 //var Xstr, Ystr; //var X, Y; //Xstr = document.getElementById("LatM").innerHTML; // chaine de caractères //Ystr = document.getElementById("LongM").innerHTML; // chaine de caractères //X = parseFloat(Xstr); // conversion en nombre flottant //Y = parseFloat(Ystr); // conversion en nombre flottant var X = 43.8453794; var Y = 5.1101713; //var X = LatM; //var Y = LongM;
devient :
Code:

1 2 3 4 5 6 7 8 9 10 var Xstr, Ystr; var X, Y; Xstr = document.getElementById("LatM").innerHTML; // chaine de caractères Ystr = document.getElementById("LongM").innerHTML; // chaine de caractères X = parseFloat(Xstr); // conversion en nombre flottant Y = parseFloat(Ystr); // conversion en nombre flottant //var X = 43.8453794; //var Y = 5.1101713; //var X = LatM; //var Y = LongM;
Donc là, sauf erreur, si tu places un alert() sur Xstr, Ystr, X et Y tu dois avoir une valeur.

J'ai testé la 1ère partie de ton code. Cela fonctionne mais le résultat est un peu long à s'afficher. Donc si tu cliques sur le bouton avant l'affichage du résultat à l'écran tes alert() de ta fonction calcul() risquent de ne rien donner.

Ok pour la fonction appelée par un bouton :

1er script long à s'afficher :

Code:

1
2
3
4
5
6
var LatM = position.coords.latitude;
	var LongM = position.coords.longitude;
 
 
	document.getElementById("LatM").innerHTML = LatM;
	document.getElementById("LongM").innerHTML = LongM;

2eme script :

Code:

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
<script>
function calcul() {
 
    var Lat1 = 43.846839;
	var Long1 = 5.107955;
	alert(Long1);    // ici OK
 
	var Lat2 = 43.844239;
	var Long2 = 5.112307;
	alert(Long2);   // ici OK
 
	var imgwidth = 836;
	var imgheight = 667;
	alert(imgheight);   // ici OK
 
 
	var Xstr, Ystr;
	var X, Y;
	Xstr = document.getElementById("LatM").innerHTML;       // chaine de caractères
	Ystr = document.getElementById("LongM").innerHTML;    // chaine de caractères
	X = parseFloat(Xstr);     // conversion en nombre flottant
	Y = parseFloat(Ystr);      // conversion en nombre flottant
	//var X = 43.8453794;
	//var Y = 5.1101713;
	alert(Xstr);  // ici champ vide
	alert(Y);     // ici NaN
 
	//if (LongM<Long1 && LongM>Long2) {alert("Vous n'êtes pas dans la zone !");}
	//else {Hmap= Math.abs(Long2 - Long1);}
	Hmap = Math.abs(Long2 - Long1);
 
	//if (LatM<Lat1 && LatM>Lat2) {alert("Vous n'êtes pas dans la zone !");}
	//else {Lmap= Math.abs(Lat2 - Lat1);}
	Lmap = Math.abs(Lat2 - Lat1);
	alert(Lmap);	
 
	var LPosRel = Math.abs(Y - Long1);
	var HPosRel = Math.abs(X - Lat1);
	alert(HPosRel);
 
	var ResL = LPosRel / Hmap;
	var ResH = HPosRel / Lmap;
	alert(ResH);
 
	var Lmarker = ResL * imgwidth;    // résultat en pixel pour placer le Marker sur l'image.
	var Hmarker = ResH * imgheight;
	alert(Hmarker);
 
	}
</script>

13/04/2014, 18h34
Web-Greg
Ha bizarre, en fait ça fonctionne mais à la condition que j'affiche les resultats de la géolocalisation comme ça dans ma page :
Code:

1 2 3 4 5 <p id="status"></p> <h4 id="pos"></h3> <p id="LatM"></p> <p id="LongM"></p> <p id="acc"></p>

Merci pour ton aide et pour le temps passé à résoudre mon problème , vraiment !!

Je me permets une toute dernière question.

Lmarker & Hmarker me renvoient bien un résultat.
Comment je dois procéder pour insérer les résultats dans mon affichage du marker dans ma page html entre les guillemets :

Je pense pas pouvoir afficher ça comme Lmat -> <p id="LatM"></p> :-(
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15  <li data-marker-type="tooltip" data-show-content="yes" data-reg-point="centerbottom" data-marker-normal-state-path="marker1.png" data-marker-selected-state-path="marker1-rollover.png" data-marker-left="Lmarker"  data-marker-top="Hmarker" data-marker-width="28" data-marker-height="36" data-show-after-zoom-factor="0"> <div class="InfoDiv">Vous etes ici</div> </li> 

En toute franchise je ne peux pas répondre à cette question.

Mais je pense que tu peux faire comme ceci (note que j'ai ajouté l'attribut id à ta balise) :
Code:

1 2 3 4 5 6 7 8 9 10 11 <li id="identifiantBalise" data-marker-type="tooltip" data-show-content="yes" data-reg-point="centerbottom" data-marker-normal-state-path="marker1.png" data-marker-selected-state-path="marker1-rollover.png" data-marker-left="Lmarker" data-marker-top="Hmarker" data-marker-width="28" data-marker-height="36" data-show-after-zoom-factor="0">
puis dans une fonction javascript (je pense à celle qui fait les caculs) :
Code:

1 2 document.getElementById("identifiantBalise").dataMarkerLeft = Lmarker + "px"; document.getElementById("identifiantBalise").dataMarkerTop = Hmarker+ "px";
tu remarqueras que j'ai supprimé les "-" de l'attribut et mis des majuscules.

J'ai testé ton exemple sans trop de résultat...J'ai aussi essayé ça :

- dans mon script function calcul()

Code:

1
2
3
4
5
	var Lmarker = ResL * imgwidth;    // résultat en pixel pour placer le Marker sur l'image.
	var Hmarker = ResH * imgheight;
 
	document.getElementById("repere.Lpos").innerHTML = Lmarker;
	document.getElementById("repere.Hpos").innerHTML = Hmarker;

En bas de page ou en alert, j'obtiens le bon résultat

Code:

Lpos : <span id='repere.Lpos'></span>

Mais dès que je l’insère dans ma page, dans la balise qui appelle le marqueur, ça ne fonctionne plus :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
            <!-- MARQUEUR POSITION --> 
			<li
			data-marker-type=tooltip
			data-show-content=yes
			data-reg-point=centerbottom 
			data-marker-normal-state-path=cartes/skin/skin_02/skin/marker1.png 
			data-marker-selected-state-path=cartes/skin/skin_02/skin/marker1-rollover.png 
			data-marker-left=   //  <-- repere.Lpos
			data-marker-top=  //   <-- repere.Hpos
			data-marker-width=28
			data-marker-height=36 
			data-show-after-zoom-factor=0>
			<div class="InfoDiv">Vous etes ici</div>
			</li>            
            <!-- --FIN POSITION -->

14/04/2014, 20h59
Auteur

J'espère que les autres membres lisant ton sujet auront plus d'inspiration. Je ne peux malheureusement pas t'aider.
15/04/2014, 09h37
Web-Greg

Merci pour ton aide, grâce à toi j'ai pu résoudre le problème de ce sujet !