Comportement inattendu d'une boucle For

Version imprimable

Salut à tous,

J'obtiens un comportement étonnant d'une boucle For qui incrémente une variable entre deux "valeurs bornes" récupérées d'un formulaire (de type : number)

si je mets 1 comme valeur basse (AtkLowUnits) cela fonctionne, mais si j'y place une valeur de 2 ou + la boucle n'itère plus lorsque la borne supérieure (AtkHighUnits) est supérieure à 10.
si par contre je place une borne basse de 10 ou +, cela fonctionne de nouveau
pour tester on peut par exemple utiliser comme valeurs :

1 , 8 (correct)
1 , 12 (correct)
2 , 8 (correct)
2 , 11 (étonnant)
11 , 16 (de nouveau correct)

Merci par avance !!!

Voici le code :

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
<html>
 
	<head>
 
		<script type="text/javascript">
                        
                                function run(){
                                        
                                        var     AtkLowUnits             = document.getElementById('AttackLowUnits').value;              //
                                        var     AtkHighUnits    = document.getElementById('AttackHighUnits').value;             // Variables Globales peuplées avec
 
                                
alert(AtkLowUnits + ' -> ' + AtkHighUnits);
                                        for (var I = AtkLowUnits; I <= AtkHighUnits; I++) {
                                                
                                                alert(I);
        
                                        }       
                                }
                                        
                </script>
 
 
	</head>	
 
 
	<body>
		<form>
			<label>Unités du pays attaquant :</label><br>								
			<label>de </label><input type="number" id="AttackLowUnits">
			<label>à </label> <input type="number" id="AttackHighUnits">
			<input type="button" value="Démarrer la simulation" onClick="run()">	
		</form>		
	</body>	
 
</html>

Salut
Des fois ...

Code:

1
2
var AtkLowUnits = Number(document.getElementById('AttackLowUnits').value);              //
var AtkHighUnits = Number(document.getElementById('AttackHighUnits').value);             // Variables Globales peuplées avec

Bonjour,

ProgElecT a raison.

xxx.value renvoie toujours une chaine de caractères (string)
Dans le cas '2' > '12' : la chaine '12' est "plus petite" que la chaine '2'

Number() le transforme en nombre, exploitable

Pour s'en convaincre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function run(){
 
  var AtkLowUnits = document.getElementById('AttackLowUnits').value; //
  var AtkHighUnits = document.getElementById('AttackHighUnits').value; // Variables Globales peuplées avec
 
  if (AtkLowUnits <= AtkHighUnits) {
    console.log( 'Chaine : "'+ AtkLowUnits + '" <= "' + AtkHighUnits +'"');
  } else {
    console.log( 'Chaine : "'+ AtkLowUnits + '" > "' + AtkHighUnits +'"');
  }
  if (Number(AtkLowUnits) <= Number(AtkHighUnits) ) {
    console.log( 'Number : '+ AtkLowUnits + ' <= ' + AtkHighUnits );
  } else {
    console.log( 'Number : '+ AtkLowUnits + ' > ' + AtkHighUnits );
  }
}

console.log() affiche le résultat dans la Console (F12 -> onglet "Console")