[javascript]pb d'incrémentation

Version imprimable

Bonjour à tous,
J'ai un petit problème pour passer à la case suivante, surement du à une incrémentation défectueuse, mais je dois vous avouer que je ne vois pas où se situe cette erreur.

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
51
52
53
54
55
 
 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
td{ 
cursor: pointer; 
width: 50px; 
height: 20px; 
border: solid 1px #555555; 
} 
 
td.defaut{ 
color: #AAAAAA; 
background-color: #FFFFF; 
} 
 
td.styleClic{ 
color: #000000; 
background-color: #A1B2C3; 
} 
//--> 
</style> 
 
<script type="text/javascript"> 
<!-- 
var a = 1; 
function suivant(a) 
{ 
document.getElementById(a+1).className="styleClic";
document.getElementById(a).className="defaut";
var a=a+1;
} 
 
//--> 
</script> 
 
</head> 
 
<body> 
<table> 
  <tr> 
    <td id="1" class="styleClic">case 1</td> 
    <td id="2" class="defaut">case 2</td> 
    <td id="3" class="defaut">case 3</td> 
    <td id="4" class="defaut">case 4</td> 
	<input type="button" value="suivant" onClick="suivant(a)"/>
  </tr> 
</table> 
 
</body> 
 
</html>

Un indice svp.
Merci d'avance.

14/03/2006, 14h18
SpaceFrog

c'est quoi le but ?
14/03/2006, 14h21
Matthieu2000

tu n'as pas besoin de mettre a en paramètre ni de le déclarer comme variable dans la fonction car a est déjà déclarer en globale!
14/03/2006, 14h27
cisse18

Le but est de passer de la case1 à la case2 etc... en cliquant sur le bouton suivant.
J'ai remis un "var" parce que je ne savais plus quoi faire et parce que dans un exemple d'un des tutoriels "a" etait déclaré avant la fonction mais aussi dedans.Mais bon, je comprends qu'il ne soit pas nécessaire de le remettre.
14/03/2006, 14h52
SpaceFrog

En fait ce qui fait vraiment planter ton code c'est la ligne

Code:

var a=a+1

car à ce moment là tu réinitialises la variable ...

remplace cette ligbne simplement par :

Code:

a++

et nul besoin de passer a en paramètre ...

Code:

<input type="button" value="suivant" onClick="suivant()"/>
14/03/2006, 14h54
cisse18

Je passe bien jusqu'à la case 2 mais pas plus.
Une miette d'indice à me lancer ? :(
14/03/2006, 14h58
SpaceFrog

j'espère que nos posts se sont croisés ... :roll:
14/03/2006, 15h15
cisse18

En effet, j'ai répondu avant d'avoir eu ton message.
Par contre j'ai voulu mettre "a++" et "suivant()", mais ça marche encore moins bien.Je passe même plus sur la case 2. :oops:
Une autre idée?

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
51
52
53
54
<html> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
td{ 
cursor: pointer; 
width: 50px; 
height: 20px; 
border: solid 1px #555555; 
} 
 
td.defaut{ 
color: #AAAAAA; 
background-color: #FFFFF; 
} 
 
td.styleClic{ 
color: #000000; 
background-color: #A1B2C3; 
} 
//--> 
</style> 
 
<script type="text/javascript"> 
<!-- 
var a = 1; 
function suivant() 
{ 
document.getElementById(((a+1) % 4)).className="styleClic"; 
document.getElementById((a % 4) ).className="defaut"; 
a++; 
} 
 
//--> 
</script> 
 
</head> 
 
<body> 
<input type="button" value="suivant" onClick="suivant()"/> 
<table> 
  <tr> 
    <td id="1" class="styleClic">case 1</td> 
    <td id="2" class="defaut">case 2</td> 
    <td id="3" class="defaut">case 3</td> 
    <td id="0" class="defaut">case 4</td>    
  </tr> 
</table> 
tt
 
</body> 
 
</html>

plus simplement...

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
51
52
53
54
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
td{
cursor: pointer;
width: 50px;
height: 20px;
border: solid 1px #555555;
}
 
.defaut{
color: #AAAAAA;
background-color: #FFFFF;
}
 
.styleClic{
color: #000000;
background-color: #A1B2C3;
}
//-->
</style>
 
<script type="text/javascript">
<!--
var a = 1;
function suivant()
{
document.getElementById(a+1).className="styleClic";
document.getElementById(a).className="defaut";
a++;
}
 
//-->
</script>
 
</head>
 
<body>
<table>
  <tr>
    <td id="1" class="styleClic">case 1</td>
    <td id="2" class="defaut">case 2</td>
    <td id="3" class="defaut">case 3</td>
    <td id="4" class="defaut">case 4</td>
   <input type="button" value="suivant" onClick="suivant()"/>
  </tr>
</table>
 
</body>
 
</html>

14/03/2006, 15h26
Matthieu2000

suis plus rapide! :twisted:
14/03/2006, 15h32
cisse18

Impeccable, ça marche nickel.
Merci à vous deux.

Juste un dernier petit truc et après je clos le sujet: pourquoi avoir rajouté " % 4" à "(a+1)" ?
14/03/2006, 15h33
SpaceFrog

non math tu avais posté avant mais regarde ton code ...

Code:

document.getElementById(((a+1) % 4)).className="styleClic";

8O 8O 8O
14/03/2006, 15h39
Matthieu2000

dans mon code après 3 cela tombe à 0!
puis repart à 1...
14/03/2006, 15h44
SpaceFrog

c'était pas la question :evil:
hors sujet :twisted:

:lol: :lol: :lol:
:wink:
14/03/2006, 16h06
cisse18

et sinon, matthieu2000, comment ça marche le "% 4", ça sert à quoi ?
14/03/2006, 16h27
SpaceFrog

partie entière de la division par 4

alors qui c'est qu'il est rapide :lol: :lol:

speedy frog :wink:
14/03/2006, 16h29
titoumimi

pour plus d'infos, tu peur rechercher sur google 'modulo' :wink: