Trier variables numériques entrées par utilisateur

**Medenor** · 18/06/2011, 20h29

Bonsoir,

Dans le cadre de l'élaboration d'un solveur de combat pour un JDR en ligne, je suis amené à m'occuper d'un onglet gérant l'initiative des joueurs, en gros qui agit avant qui.

Ainsi, le maitre de jeu est amené à introduire dans un input la valeur numérique de l'initiative du joueur ainsi que dans un autre input celle de son adversaire.

Je désirerai faire en sorte que dans un <span> s'affiche les deux valeurs triées par ordre croissant.

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
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />	
		<link type="text/css" href="css/design.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
		<script type="text/javascript">
 
$(document).ready(function() {
// ---------------------------------------------------------------					
			//gestion du formulaire pour l'initiative
				$("#ini-but").click(function() {
 
					// vide les champs générés par le JavaScript pour permettre de relancer le formulaire
					$(" #ini-pj, #ini-adv, #ini-result-pj, #ini-result-adv, #triINI").empty();
 
					// mise en Array des valeurs du formulaire
					var Valeurs = new Array();
						Valeurs ["ini-pj"] = parseInt($("#ini-pj").attr("value"));
						Valeurs ["ini-adv"] = parseInt($("#ini-adv").attr("value"));
 
					var resultatpj= "";
					var resultatadv= "";
					var triINI= "";
 
					// vérifie si les champs sont corrects, et renvoit un message d'erreur en fonction
					// /!\ faire le passage du nom de champs brut à un intitulé plus propre !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
					var verif_champs = "";
					for(val in Valeurs) {
						if(isNaN(Valeurs[val]))
							verif_champs += "le champs " + val + " n'est pas rempli ou n'est pas un nombre \n";
						if( Valeurs[val]>20 || Valeurs[val]<0)
							verif_champs += "le champs " + val + " doit être compris entre 0 et 20 \n";
					}
 
					//si souci avec le formulaire, on n'execute pas le script
					if (verif_champs!="") {
						alert (verif_champs);
						return false;
					}
 
					//génère les jets de dés à utiliser
					var inipjDice=Math.floor(Math.random()*20)+1;
					var iniadvDice=Math.floor(Math.random()*20)+1;
 
					// Traitement des données pour le PJ
 
					if (inipjDice <= Valeurs ["ini-pj"]) {
						resultatpj += "Le PJ a réussi son test d'INI(" + inipjDice + ") et bénéficie de 2 actions au premier tour. ";
 
						}else {
						resultatpj += "Le PJ a raté son test d'INI (" + inipjDice + ") et ne bénéficie que d'une action au premier tour.";
					}
 
					// Traitement des données pour l'adversaire
 
					if (iniadvDice <= Valeurs ["ini-adv"]) {
						resultatadv += "L'adversaire a réussi son test d'INI(" + iniadvDice + ") et bénéficie de 2 actions au premier tour. ";
 
						}else {
						resultatadv += "L'adversaire a raté son test d'INI (" + iniadvDice + ") et ne bénéficie que d'une action au premier tour.";
					}
 
					$("#ini-result-pj").append(resultatpj);
					$("#ini-result-adv").append(resultatadv);
 
					// Classement des INI selon données entrées dans #ini-pj et #ini-adv
 
					function compare(x, y) {
    				return x - y;
				}
 
					var triINI = new Array(Valeurs ["ini-pj"], Valeurs ["ini-adv"]);
					triINI.sort(compare);
					$("#triINI").append(triINI);
 
				});
 
 
// ---------------------------------------------------------------	
});
		</script>

Et coté HTML, le formulaire:

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
<div id="tabs-1">
            <table width="1019">
						<tr>
						  <td width="140" align="center">Initiative PJ</td>
						  <td width="250"><input type="text" id="ini-pj"/></td>
						  <td width="158" align="center">Initiative de l'adversaire</td>
						  <td width="451"><input type="text" id="ini-adv"/></td>
                          <td><span id="ini-but"><img src="img/de2-gris.png" height="30px" onclick="roll(champDe2);champDe2.style.backgroundColor = '#DDDDFF';" onmouseout="champDe2.style.backgroundColor = '';" style="cursor:pointer;" /></span></td>
						</tr>
						<tr>
							<td align="center"><em><strong>	Résultat du premier tour: </strong></em></td>
                          <td colspan="4"> <span id ="ini-result-pj"></span><span id ="ini-result-adv"></span></td>
						</tr>
						<tr>
							<td align="center"><em><strong>	Classement des tours suivants: </strong></em></td>
                            <td><span id="#triINI"></span></td>
						</tr>
					</table>
 
        </div>

J'ai essayé via function compare(x, y) mais à mon avis, je code mal la création de l'array ou alors ca coince au niveau du <span id="#triINI"></span>

Merci d'avance !

NB: le solveur: http://warforum-jdr.com/solveur/
je ne suis pas le codeur original de l'entièreté du solveur, la base (l'onglet Corps à corps) n'est pas de moi mais d'un autre membrede mon forum, et je me suis basé sur son travail pour reprendre le flambeau. Il était parti sur une base de jquery par choix personnel. Ne connaissant pas ce langage (ni le javascript plus que ça en fait), j'ai préféré continuer en js sur la base jquery en me servant au maximum de son code original pour les ajouts d'autres modules.

NB: le code n'est peut être (voir sûrement) pas ultra propre ni optimisé, je suis preneur de toute modification en ce sens

**Medenor** · 19/06/2011, 19h23

Bonsoir,

On m'a aidé sur la question:

mettre

Code :

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

<td><span id="triINI"></span></td>

et dans le code javascript:

Code :

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

$("#triINI").text(''+triINI);

Le ''+ force la conversion du tableau en chaîne de caractères. Sinon jQuery n'apprécie pas.

Et c'est nickel car ça fonctionne bien

J'ai inversé le tri car normalement c'est celui qui possède la plus grande valeur qui agit en premier, j'avais pas fait attention

J'aimerai néanmoins améliorer l'affichage et qu'au lieu d'afficher par exemple "20,10", il m'affiche "Joueur 1 (20), Joueur 2 (10)"

Si c'est possible, avez-vous une idée ? Merci

**Medenor** · 19/06/2011, 21h30

Bonsoir,

Changement de tactique, via des if/else if/else c'est parfait et plus simple

Problème réglé !

Trier variables numériques entrées par utilisateur

JavaScript

Discussions similaires

Partager

Partager