IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Colorer une zone de tableau


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club Avatar de bj303931
    Femme Profil pro
    Étudiant
    Inscrit en
    Février 2016
    Messages
    75
    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 : 75
    Points : 27
    Points
    27
    Par défaut Colorer une zone de tableau
    Bonjour, j'aimerais faire ceci:

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

    Or, j'obtiens ceci:

    Nom : r.png
Affichages : 233
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 émérite
    Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    Septembre 2002
    Messages
    1 412
    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 : 1 412
    Points : 2 522
    Points
    2 522
    Par défaut
    J'avoue (à ma grande honte) que je n'ai rien compris.
    Cela ne sert à rien d'optimiser quelque chose qui ne fonctionne pas.

    Mon site : www.emmella.fr

    Je recherche le manuel de l'Olivetti Logos 80B.

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

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

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    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

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Membre éclairé
    Femme Profil pro
    Autre
    Inscrit en
    Janvier 2017
    Messages
    335
    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 : 335
    Points : 715
    Points
    715
    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
    Nouveau membre du Club Avatar de bj303931
    Femme Profil pro
    Étudiant
    Inscrit en
    Février 2016
    Messages
    75
    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 : 75
    Points : 27
    Points
    27
    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 éclairé
    Femme Profil pro
    Autre
    Inscrit en
    Janvier 2017
    Messages
    335
    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 : 335
    Points : 715
    Points
    715
    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, 22h38
  2. [JFreeChart] Colorer une zone
    Par Mopmop dans le forum API standards et tierces
    Réponses: 2
    Dernier message: 16/08/2011, 13h07
  3. Réponses: 1
    Dernier message: 24/05/2011, 01h42
  4. Définir une zone sans tableau
    Par Invité dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 24/06/2009, 16h17
  5. Colorer une zone d'une figure
    Par nant44 dans le forum MATLAB
    Réponses: 3
    Dernier message: 03/04/2008, 13h16

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