Colorer une zone de tableau

Version imprimable

2 pièce(s) jointe(s)

Bonjour, j'aimerais faire ceci:

Pièce jointe 254788

Or, j'obtiens ceci:

Pièce jointe 254783

Mon 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
 
for(i=0; i<taille; i++){
 
if (nord=='white'){document.getElementById(n).style.backgroundColor='red';}    
 
if (sud=='white'){document.getElementById(s).style.backgroundColor='yellow';}
 
if (est=='white'){document.getElementById(e).style.backgroundColor='blue';}
 
if (ouest=='white'){document.getElementById(o).style.backgroundColor='green';}
 
var n=x-3-2*taille;
var nord=document.getElementById(n).className;
//document.getElementById("n").innerHTML=nord;
var s=x+3+2*taille;
var sud=document.getElementById(s).className;
//document.getElementById("s").innerHTML=sud;
var e=x+1;
var est=document.getElementById(e).className;
//document.getElementById("e").innerHTML=est;
var o=x-1;
var ouest=document.getElementById(o).className;
//document.getElementById("o").innerHTML=ouest;
}

Je ne comprends pas j'ai fais une boucle pourtant...

Merci pour votre aide.:roll:

Le code complet:

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
56
57
58
59
60
61
62
63
64
65
66
67
function clic(x){
 
var i=0;
 
var milieu=document.getElementById(x).className;
if(milieu=='white'){document.getElementById(x).style.backgroundColor='pink';}
 
var taille=document.getElementById('taille').value;
taille=taille-1;
 
var n=x-3-2*taille;
var nord=document.getElementById(n).className;
//document.getElementById("n").innerHTML=nord;
var s=x+3+2*taille;
var sud=document.getElementById(s).className;
//document.getElementById("s").innerHTML=sud;
var e=x+1;
var est=document.getElementById(e).className;
//document.getElementById("e").innerHTML=est;
var o=x-1;
var ouest=document.getElementById(o).className;
//document.getElementById("o").innerHTML=ouest;
 
document.getElementById(mem).innerHTML='';
document.getElementById(x).innerHTML='+';
 
document.getElementById('b').innerHTML="Tu va de "+mem+" a "+x;
mem=x;
 
for(i=0; i<taille; i++){
 
if (nord=='white'){document.getElementById(n).style.backgroundColor='red';}    
 
if (sud=='white'){document.getElementById(s).style.backgroundColor='yellow';}
 
if (est=='white'){document.getElementById(e).style.backgroundColor='blue';}
 
if (ouest=='white'){document.getElementById(o).style.backgroundColor='green';}
 
var n=x-3-2*taille;
var nord=document.getElementById(n).className;
//document.getElementById("n").innerHTML=nord;
var s=x+3+2*taille;
var sud=document.getElementById(s).className;
//document.getElementById("s").innerHTML=sud;
var e=x+1;
var est=document.getElementById(e).className;
//document.getElementById("e").innerHTML=est;
var o=x-1;
var ouest=document.getElementById(o).className;
//document.getElementById("o").innerHTML=ouest;
}
 
var Tt=(taille+3)*(taille+3);
var nT=new Array(Tt);
for (i=0; i<Tt; i++){nT[i]=0;}
i=Tt;
 
while(i>0){
    if(nord=='white'){nT[i]==1;}
    i=i-3-2*taille;
    nord=document.getElementById(i).className;
}
 
document.getElementById("a").innerHTML=nT;
 
}

16/03/2017, 21h00
badaze

J'avoue (à ma grande honte) que je n'ai rien compris.

:salut:

Citation:

Envoyé par bj303931

[...] Mon 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
 
for(i=0; i<taille; i++){
 
if (nord=='white'){document.getElementById(n).style.backgroundColor='red';}    
 
if (sud=='white'){document.getElementById(s).style.backgroundColor='yellow';}
 
if (est=='white'){document.getElementById(e).style.backgroundColor='blue';}
 
if (ouest=='white'){document.getElementById(o).style.backgroundColor='green';}
 
var n=x-3-2*taille;
var nord=document.getElementById(n).className;
//document.getElementById("n").innerHTML=nord;
var s=x+3+2*taille;
var sud=document.getElementById(s).className;
//document.getElementById("s").innerHTML=sud;
var e=x+1;
var est=document.getElementById(e).className;
//document.getElementById("e").innerHTML=est;
var o=x-1;
var ouest=document.getElementById(o).className;
//document.getElementById("o").innerHTML=ouest;
}

[...]

Il nous manque le contexte (HTML, CSS, et la totalité du code JS ) ou un lien vers la page HTML pour faire des tests.

Ce n'est jamais une bonne idée ( performance) de déclarer des variables dans une boucle "for". Attention, dans le code ci-dessus, vous utilisez les variables avant de les avoir créées.

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
var n, nord, s, sud, e, est, o, ouest;
 
// déclaration et valeur de taille ?
 
for( var i = 0; i < taille; i++ ){
 
  // déclaration et valeur de x ?
 
  n = x - 3 - 2 * taille;
  nord=document.getElementById(n).className;
 
  s = x + 3 + 2 * taille;
  sud=document.getElementById(s).className;
 
  e = x + 1;
  est=document.getElementById(e).className;
 
  o = x - 1;
  ouest=document.getElementById(o).className;
 
  if ( nord=='white' ){
    document.getElementById(n).style.backgroundColor='red';
  }    
 
  if ( sud=='white' ){
    document.getElementById(s).style.backgroundColor='yellow';
  }
 
  if ( est=='white' ){
    document.getElementById(e).style.backgroundColor='blue';
  }
 
  if ( ouest=='white' ){
    document.getElementById(o).style.backgroundColor='green';
  }
}

17/03/2017, 09h29
Loralina

Bonjour,
Ce que l'on peut déjà dire, c'est que le résultat obtenu correspond apparemment bien au code :
- "x" est la case du milieu, on la met en rose et on écrit un signe "+" dedans.
- "taille" vaut 3-1=2.
- Pour la numérotation des cases telle que je la devine, x=25 (si la première en haut à gauche vaut 1), donc n=18, s=32, e=26 et o=24, ça colle.
- "nord", "sud" et "est" valent "white" et "ouest" vaut sans doute "black".
- Dans la boucle, les trois cases blanches deviennent colorées, puis on réaffecte les variables, mais avec les mêmes valeurs qu'avant la boucle.
- A la deuxième itération de la boucle, on refait la même chose et sur les mêmes cases, d'où le visuel obtenu.

Pour ce qui est après la boucle : on crée un tableau correspondant aux 25 premières cases et pour la case "x" et celles au-dessus dans la même colonne, on met à 1 les index correspondant à des cases blanches. A voir si c'est réellement ce qui est souhaité.
L'affectation "nT[i]==1;" est erronée : il y a un égal en trop et il faudrait mettre "i-1" : "nT[i-1]=1;".
17/03/2017, 11h45
bj303931

Merci, pour vos réponses, c'est vrai il faudrait que je déclare tout au début du code ;) . Mais, ça ne marche toujours pas...:( HELP!:ptdr: En faite, j'aimerais colorier une zone entière...:mouarf:
17/03/2017, 16h07
Loralina

C'est un peu léger comme réponse. ;)
Au minimum, il faudrait indiquer si au moins vous avez compris pourquoi cela ne marchait pas (je pense l'avoir bien expliqué) et être plus précise sur l'objectif.

S'il s'agit de colorer toutes les cases accessibles depuis la case "x", une possibilité serait de faire une fonction récursive avec en paramètre un numéro de case.
Dans cette fonction :
1) On colore la case correspondant au numéro.
2) Pour chacune des 4 cases autour : si la case existe, que sa classe est "white" et que sa couleur de fond est différente de la couleur souhaitée, alors on exécute la fonction sur la case.
Pour démarrer le traitement, on peut appeler la fonction avec le numéro "x".