Calcul avec un select...

**dark_vidor** · 03/03/2006, 22h34

Bonjour,

J'ai un petit pb

J'ai un select qui me permet de choisir une destination
J'aimerais pouvoir calculer le temps en seconde pour aller sur celle ci (application de la formule AB² = racine[ (Xb-Xa)² + (Yb-Ya)² ] )

Les coordonnées de la cible sont a recuperer suivant la valeur du select (le select est generé par php / les infos sont stocké en base de données)

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
<html>
<head>
<title>gni ?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function update(coord_Xm, coord_Ym)
{
	var coord_Xo = 427;
	var coord_Yo = 57;
 
	document.getElementById('temps').innerHTML = 'Temps estimé*&nbsp;:&nbsp;'+10*Math.sqrt(Math.pow(coord_Xm-coord_Xo,2)+Math.pow(coord_Ym-coord_Yo,2))+'&nbsp;sec&nbsp;&nbsp;';
}
</script>
</head>
<body>
<select name="destination" id="destination" class="select">
  <option value=1 style="color: #0000FF;" onKeyUp="update(584,247);">Aduba 3 [Romek]</option>
  <option value=2 style="color: #00FF00;" onKeyUp="update(424,57);">Almania [dark_vidor]</option>
  <option value=3 style="color: #FF0000;" onKeyUp="update(530,460);">Alzoc 3 [Decapfour]</option>
  <option value=4 style="color: #0000FF;" onKeyUp="update(389,32);">Ammuund [Romek]</option>
  <option value=5 style="color: #0000FF;" onKeyUp="update(490,410);">Ando [Romek]</option>
  <option value=6 style="color: #0000FF;" onKeyUp="update(275,550);">Anoat [Dark Ness]</option>
  <option value=7 style="color: #0000FF;" onKeyUp="update(270,575);">Anoth [Dark Ness]</option>
  <option value=8 style="color: #9E6209;" onKeyUp="update(455,192);">Anzat </option>
  <option value=9 style="color: #9E6209;" onKeyUp="update(450,473);">Arbra </option>
</select>
<div id='temps'></div>
<script language="JavaScript">
update();
</script>
</body>
</html>

Bon ça ne fonctionne pas

Si vous pouviez m'aider

Merci par avance

**gorgonite** · 03/03/2006, 22h46

un petit tableau contenant les valeurs... ça évite de faire des trucs alambiqués

l'utilisation de onchange sur select...

et enfin, update() sert à quoi ???

**dark_vidor** · 03/03/2006, 22h52

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
<html>
<head>
<title>gni ?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function update(coord_Xm, coord_Ym)
{
	var coord_Xo = 427;
	var coord_Yo = 57;
 
	document.getElementById('temps').innerHTML = 'Temps estimé*&nbsp;:&nbsp;'+10*Math.sqrt(Math.pow(coord_Xm-coord_Xo,2)+Math.pow(coord_Ym-coord_Yo,2))+'&nbsp;sec&nbsp;&nbsp;';
}
</script>
</head>
<body>
<select name="destination" id="destination" class="select">
  <option value=1 style="color: #0000FF;" onChange="update(584,247);">Aduba 3 [Romek]</option>
  <option value=2 style="color: #00FF00;" onChange="update(424,57);">Almania [dark_vidor]</option>
  <option value=3 style="color: #FF0000;" onChange="update(530,460);">Alzoc 3 [Decapfour]</option>
  <option value=4 style="color: #0000FF;" onChange="update(389,32);">Ammuund [Romek]</option>
  <option value=5 style="color: #0000FF;" onChange="update(490,410);">Ando [Romek]</option>
  <option value=6 style="color: #0000FF;" onChange="update(275,550);">Anoat [Dark Ness]</option>
  <option value=7 style="color: #0000FF;" onChange="update(270,575);">Anoth [Dark Ness]</option>
  <option value=8 style="color: #9E6209;" onChange="update(455,192);">Anzat </option>
  <option value=9 style="color: #9E6209;" onChange="update(450,473);">Arbra </option>
</select>
<div id='temps'></div>
<script language="JavaScript">
update(584,247);
</script>
</body>
</html>

Pas compris pour le tableau

ni comment l'utiliser

**gorgonite** · 03/03/2006, 23h02

le tableau contient les coordonnées de tes destinations...

et aussi

Code :

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

1
2
3
4
5
6
7
8
 
function refresh() {
  var select = document.getElementById('listing');
  var id = select.selectedIndex;
  update(x[id],y[id]);
}
 
<select id="listing" onchange="refresh()">...</select>

**dark_vidor** · 03/03/2006, 23h19

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
52
53
54
55
56
57
58
59
60
61
<html>
<head>
<title>gni ?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function refresh() {
  var select = document.getElementById('destination');
  var id = select.selectedIndex;
  x = new Array(9);
	x[1] = "584";
	x[2] = "427";
	x[3] = "530";
	x[4] = "389";
	x[5] = "490";
	x[6] = "275";
	x[7] = "270";
	x[8] = "455";
	x[9] = "450";
 
  y = new Array(9);
	y[1] = "247";
	y[2] = "57";
	y[3] = "460";
	y[4] = "32";
	y[5] = "410";
	y[6] = "550";
	y[7] = "575";
	y[8] = "192";
	y[9] = "473";
 
	update(x[id],y[id]);
} 
function update(coord_Xm, coord_Ym)
{
	var coord_Xo = 427;
	var coord_Yo = 57;
	var temps = Math.floor(10*Math.sqrt(Math.pow(coord_Xm-coord_Xo,2)+Math.pow(coord_Ym-coord_Yo,2)))
	if (isNaN(temps)) temps = 0;
 
	document.getElementById('temps').innerHTML = 'Temps estimé*&nbsp;:&nbsp;'+temps+'&nbsp;sec&nbsp;&nbsp;';
}
</script>
</head>
<body>
<select name="destination" id="destination" class="select" onChange="refresh()">
  <option value=1 style="color: #0000FF;">Aduba 3 [Romek]</option>
  <option value=2 style="color: #00FF00;">Almania [dark_vidor]</option>
  <option value=3 style="color: #FF0000;">Alzoc 3 [Decapfour]</option>
  <option value=4 style="color: #0000FF;">Ammuund [Romek]</option>
  <option value=5 style="color: #0000FF;">Ando [Romek]</option>
  <option value=6 style="color: #0000FF;">Anoat [Dark Ness]</option>
  <option value=7 style="color: #0000FF;">Anoth [Dark Ness]</option>
  <option value=8 style="color: #9E6209;">Anzat </option>
  <option value=9 style="color: #9E6209;">Arbra </option>
</select>
<div id='temps'></div>
<script language="JavaScript">
refresh();
</script>
</body>
</html>