1. #1
    Membre à l'essai Avatar de bj303931
    Femme Profil pro
    Étudiant
    Inscrit en
    février 2016
    Messages
    47
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : février 2016
    Messages : 47
    Points : 21
    Points
    21

    Par défaut Colorer une zone de tableau

    Bonjour, j'aimerais faire ceci:

    Nom : t.png
Affichages : 51
Taille : 8,9 Ko

    Or, j'obtiens ceci:

    Nom : r.png
Affichages : 48
Taille : 8,8 Ko

    Mon 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
     
    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.

    Le code complet:
    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
    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;
     
    }

  2. #2
    Membre confirmé Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    septembre 2002
    Messages
    350
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : septembre 2002
    Messages : 350
    Points : 573
    Points
    573

    Par défaut

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

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 550
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 550
    Points : 20 110
    Points
    20 110
    Billets dans le blog
    34

    Par défaut



    Citation Envoyé par bj303931 Voir le message
    [...] Mon 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
     
    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 : 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
    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';
      }
    }

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  4. #4
    Membre régulier
    Femme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 49
    Points : 79
    Points
    79

    Par défaut

    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;".

  5. #5
    Membre à l'essai Avatar de bj303931
    Femme Profil pro
    Étudiant
    Inscrit en
    février 2016
    Messages
    47
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : février 2016
    Messages : 47
    Points : 21
    Points
    21

    Par défaut

    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! En faite, j'aimerais colorier une zone entière...

  6. #6
    Membre régulier
    Femme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 49
    Points : 79
    Points
    79

    Par défaut

    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".

Discussions similaires

  1. colorer une zone d'une figure
    Par karika dans le forum MATLAB
    Réponses: 9
    Dernier message: 12/06/2013, 21h38
  2. [JFreeChart] Colorer une zone
    Par Mopmop dans le forum APIs
    Réponses: 2
    Dernier message: 16/08/2011, 12h07
  3. Réponses: 1
    Dernier message: 24/05/2011, 00h42
  4. Définir une zone sans tableau
    Par christobale dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 24/06/2009, 15h17
  5. Colorer une zone d'une figure
    Par nant44 dans le forum MATLAB
    Réponses: 3
    Dernier message: 03/04/2008, 12h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo