Detecter une couleur et ajout d'une couleur sur div

Résolu/Fermé

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 2 août 2019 à 09:49
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 8 août 2019 à 17:06

Bonjour,

Je cherche à programmer une petite application où le principe est de cocher des numéros (où le background change de de couleur au click) et en fonction de certains numéros cochés, d'autres cases pas encore cochés prennent une autre couleur
Par exemple
Si 1 et 8 sont cochés (donc ont un background "vert") alors 15 doit avoir son background en rouge
Pour l'instant j'ai réussi à avoir une couleur au click mais je n'arrive pas à avoir la couleur si d'autres couleurs sont cochés ..
Je vous laisse le code en éspérant que vous comprenez ce que je cherche à faire :

HTML:

<!-- Tableau numéros -->
            <section class="container tableNum">
                <div id="tableau-num">
                    <div id="col1" class="range">
                        <div class="numeros" id="num1">1</div>
                        <div class="numeros" id="num2">2</div>
                        <div class="numeros" id="num3">3</div>
                    </div>
                    <div id="col2" class="range">
                        <div class="numeros" id="num4">4</div>
                        <div class="numeros" id="num5">5</div>
                        <div class="numeros" id="num6">6</div>
                    </div>
                    <div id="col3" class="range">
                        <div class="numeros" id="num7">7</div>
                        <div class="numeros" id="num8">8</div>
                        <div class="numeros" id="num9">9</div>
                    </div>
                    <div id="col4" class="range">
                        <div class="numeros" id="num10">10</div>
                        <div class="numeros" id="num11">11</div>
                        <div class="numeros" id="num12">12</div>
                    </div>
                    <div id="col5" class="range">
                        <div class="numeros" id="num13">13</div>
                        <div class="numeros" id="num14">14</div>
                        <div class="numeros" id="num15">15</div>
                    </div>
                    <div id="col6" class="range">
                        <div class="numeros" id="num16">16</div>
                        <div class="numeros" id="num17">17</div>
                        <div class="numeros" id="num18">18</div>
                    </div>
                    <div id="col7" class="range">
                        <div class="numeros" id="num19">19</div>
                        <div class="numeros" id="num20">20</div>
                        <div class="numeros" id="num21">21</div>
                    </div>
                    <div id="col8" class="range">
                        <div class="numeros" id="num22">22</div>
                        <div class="numeros" id="num23">23</div>
                        <div class="numeros" id="num24">24</div>
                    </div>
                    <div id="col9" class="range">
                        <div class="numeros" id="num25">25</div>
                        <div class="numeros" id="num26">26</div>
                        <div class="numeros" id="num27">27</div>
                    </div>
                    <div id="col10" class="range">
                        <div class="numeros" id="num28">28</div>
                        <div class="numeros" id="num29">29</div>
                        <div class="numeros" id="num30">30</div>
                    </div>
                    <div id="col11" class="range">
                        <div class="numeros" id="num31">31</div>
                        <div class="numeros" id="num32">32</div>
                        <div class="numeros" id="num33">33</div>
                    </div>
                    <div id="col12" class="range">
                        <div class="numeros" id="num34">34</div>
                        <div class="numeros" id="num35">35</div>
                        <div class="numeros" id="num36">36</div>
                    </div>
                  </div>
            </section>
<!-- JQuery -->
        <script
			  src="https://code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous">
        </script>

CSS:

/*-- Tableau numéros --*/
.tableNum{
    margin-top: 100px;
    border: 5px solid #038c00;
    border-radius: 40px;
    background-color: #f9fbffc9;
    text-align: center;
    color: black;
}

#tableau-num{
    display: flex;
    flex-flow: column;
    width: 800px;
    margin: auto;
}
  
.range{
    display: flex;
    justify-content: center;
}
  
.numeros{
    border: 2px solid red;
    width: 20%;
    background-color: white;
}

JS:

// -- capture des numéros -- //
$(document).ready(function() {   
    $num1 = $("#num1");
    $num1.on("click", function(){
        $num1.css('background-color', 'green');
    });
    $num2 = $("#num2");
    $num2.on("click", function(){
        $num2.css('background-color', 'green');
    });
    $num3 = $("#num3");
    $num3.on("click", function(){
        $num3.css('background-color', 'green');
    });
    $num4 = $("#num4");
    $num4.on("click", function(){
        $num4.css('background-color', 'green');
    });
    $num5 = $("#num5");
    $num5.on("click", function(){
        $num5.css('background-color', 'green');
    });
    $num6 = $("#num6");
    $num6.on("click", function(){
        $num6.css('background-color', 'green');
    });
    $num7 = $("#num7");
    $num7.on("click", function(){
        $num7.css('background-color', 'green');
    });
    $num8 = $("#num8");
    $num8.on("click", function(){
        $num8.css('background-color', 'green');
    });
    $num9 = $("#num9");
    $num9.on("click", function(){
        $num9.css('background-color', 'green');
    });
    $num10 = $("#num10");
    $num10.on("click", function(){
        $num10.css('background-color', 'green');
    });
    $num11 = $("#num11");
    $num11.on("click", function(){
        $num11.css('background-color', 'green');
    });
    $num12 = $("#num12");
    $num12.on("click", function(){
        $num12.css('background-color', 'green');
    });
    $num13 = $("#num13");
    $num13.on("click", function(){
        $num13.css('background-color', 'green');
    });
    $num14 = $("#num14");
    $num14.on("click", function(){
        $num14.css('background-color', 'green');
    });
    $num15 = $("#num15");
    $num15.on("click", function(){
        $num15.css('background-color', 'green');
    });
    $num16 = $("#num16");
    $num16.on("click", function(){
        $num16.css('background-color', 'green');
    });
    $num17 = $("#num17");
    $num17.on("click", function(){
        $num17.css('background-color', 'green');
    });
    $num18 = $("#num18");
    $num18.on("click", function(){
        $num18.css('background-color', 'green');
    });
    $num19 = $("#num19");
    $num19.on("click", function(){
        $num19.css('background-color', 'green');
    });
    $num20 = $("#num20");
    $num20.on("click", function(){
        $num20.css('background-color', 'green');
    });
    $num21 = $("#num21");
    $num21.on("click", function(){
        $num21.css('background-color', 'green');
    });
    $num22 = $("#num22");
    $num22.on("click", function(){
        $num22.css('background-color', 'green');
    });
    $num23 = $("#num23");
    $num23.on("click", function(){
        $num23.css('background-color', 'green');
    });
    $num24 = $("#num24");
    $num24.on("click", function(){
        $num24.css('background-color', 'green');
    });
    $num25 = $("#num25");
    $num25.on("click", function(){
        $num25.css('background-color', 'green');
    });
    $num26 = $("#num26");
    $num26.on("click", function(){
        $num26.css('background-color', 'green');
    });
    $num27 = $("#num27");
    $num27.on("click", function(){
        $num27.css('background-color', 'green');
    });
    $num28 = $("#num28");
    $num28.on("click", function(){
        $num28.css('background-color', 'green');
    });
    $num29 = $("#num29");
    $num29.on("click", function(){
        $num29.css('background-color', 'green');
    });
    $num30 = $("#num30");
    $num30.on("click", function(){
        $num30.css('background-color', 'green');
    });
    $num31 = $("#num31");
    $num31.on("click", function(){
        $num31.css('background-color', 'green');
    });
    $num32 = $("#num32");
    $num32.on("click", function(){
        $num32.css('background-color', 'green');
    });
    $num33 = $("#num33");
    $num33.on("click", function(){
        $num33.css('background-color', 'green');
    });
    $num34 = $("#num34");
    $num34.on("click", function(){
        $num34.css('background-color', 'green');
    });
    $num35 = $("#num35");
    $num35.on("click", function(){
        $num35.css('background-color', 'green');
    });
    $num36 = $("#num36");
    $num36.on("click", function(){
        $num36.css('background-color', 'green');
    });

    //Ensemble des numéros
    $num = $(".numeros");

    if(($num1.css('background-color') == 'green') && ($num8.css('background-color') == 'green')){
        $num15.css('background-color', 'red');
    }

});

CodePen: https://codepen.io/Frank-Ngy/pen/XvaYzV

Merci d'avance !

Configuration: Windows / Firefox 68.0

A voir également:

Detecter une couleur et ajout d'une couleur sur div
Excel cellule couleur si condition texte - Guide
Somme si couleur - Guide
Comment détecter un traceur sur téléphone - Accueil - Confidentialité
Nb si couleur ne fonctionne pas ✓ - Forum Excel
Code couleur résistance - Télécharger - Vie quotidienne

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
5 août 2019 à 13:01

Bonjour,
Tu cherches trop compliqué je pense...
Tu n'as pas besoin de vérifier à chaque fois toutes les combinaisons...

Reprenons...
- Tu cliques sur une div .... donc, pour CETTE DIV tu dois vérifier les combinaisons qui correspondraient...

Tes div sont identifiées par une class

<div class="numeros" data-col="1"  data-row="1"  id="num1">1</div>

Donc :

$(".numeros").click(function(){
  //ici tu détèctes que tu cliques sur une div
  // donc.. c'est ICI que tu dois faire la vérification
 
   //La couleur de la cellule cliquée
  var ColorCel = $(this).css('backround-color');
 
  //pour cette div (identifiée par $(this) tu peux récupérer la ligne et la colonne dans laquelle elle se trouve
   var NumCol = $(this).data('col');
   var NumRow = $(this).data('row');
   
  // Ensuite, trois cas se présentent... (tu es en colonne 1 ou en colonne 2 ou en colonne 3 )
  
  //Si  Tu es en Colonne 1 .. tu dois vérifier la colonne +1 et la colonne +2
  //pour la colonne +1 :
   var NumCol2 = NumCol + 1;
   var NumRow2 = NumRow + 2;
   //maintenant on regarde la cellule correspondant à ces coordonnées...
    var Cel2 = $('.my-class[data-col="' + NumCol2 + '"][data-row="'+NumRow2+'"]');
   //et la couleur de cette cellule :
    var ColorCel2 = Cel2.css('backround-color');
   
   
   //pour la colonne +2 :
   var NumCol3 = NumCol + 2;
   var NumRow3 = NumRow + 4;
   //maintenant on regarde la cellule correspondant à ces coordonnées...
    var Cel3 = $('.my-class[data-col="' + NumCol3 + '"][data-row="'+NumRow3+'"]');
   //et la couleur de cette cellule :
    var ColorCel3 = Cel3.css('backround-color');
   
   
   //il te reste à faire les IF pour voir dans quelle couleurs elles sont.. et appliquer ta condition...
   //.....
   
   
   

});

Mais comme il faut éviter de recopier X fois du code redondant... on va extraire le bout de code qui se répète pour en faire une fonction..

  function getColorCell(numRow,numCol){
    var CelCible = $('.my-class[data-col="' + numCol + '"][data-row="'+numRow+'"]');
    return CelCible.css('backround-color);
  }

Et donc dans le code précédent, on peut le réécrire comme ceci :

//récupère la couleur de la cellule aux coordonnées ligne/colonne
function getColorCell(numRow,numCol){
  var CelCible = $('.my-class[data-col="' + numCol + '"][data-row="'+numRow+'"]');
  return CelCible.css('backround-color');
}

//Définit la couleur de la cellule aux coordonnées ligne/colonne
function setColorCell(numRow,numCol,color){
  var CelCible = $('.my-class[data-col="' + numCol + '"][data-row="'+numRow+'"]');
  CelCible.css('backround-color',color );
}

$(".numeros").click(function(){
  //ici tu détèctes que tu cliques sur une div
  // donc.. c'est ICI que tu dois faire la vérification
  
  //La couleur de la cellule cliquée
  var ColorCel = $(this).css('backround-color');
  
  
  //pour cette div (identifiée par $(this) tu peux récupérer la ligne et la colonne dans laquelle elle se trouve
   var NumCol = $(this).data('col');
   var NumRow = $(this).data('row');
   
   
   var ColorCel2 = getColorCell(NumCol +1 ,NumRow + 2);
   var ColorCel3 = getColorCell(NumCol +2 ,NumRow + 4);
   
   //Si on en en colonne 1
  if(NumCol == 1 ){
   
   // colonne 1 et 2 en vert .. donc on met la troisième en vert également
   if(ColorCel == 'green' && ColorCel2 == 'green'){
     setColorCell(NumCol +2 ,NumRow + 4,'green'); //on met la couleur en vert à la colonne 3
   }else if(ColorCel == 'green' && ColorCel2 == 'green'){
     // colonne 1 et 3 en vert .. donc on met la deuxième en vert également 
     setColorCell(NumCol +1 ,NumRow + 2,'green'); //on met la couleur en vert à la colonne 3
   }
   
   //Idem pour l'autre digonale
   
   
   
  }else if( NumCol == 2 ){
    //idemn que pour les colonne 1 .. mais avec 
    // - la deuxième colonne qui se trouve à la col + 1
    // - la troisième colonne qui se trouve à la col - 1
   
   
  }else if( NumCol == 3 ){
    //idemn que pour les colonne 1 .. mais avec 
     // - la deuxième colonne qui se trouve à la col - 1
     // - la troisième colonne qui se trouve à la col - 2
  
  }
     
   
});

Voila.. je te laisse finir..

Frank_N
Modifié le 8 août 2019 à 11:06

Désolé pour la réponse tardive j'ai été absent quelques jours..
Merci beaucoup pour cette réponse plus que clair et détaillé ! J'avais commencé à trouver une solution avec mon tableau mais j'avais beaucoup de combinaisons à recopier, je vais continuer avec ta version du code en éspérant que j'arriverai à en tirer quelque chose (mais normalement le plus gros à été fait) merci encore !

MAJ:
Je viens d'essayer et de faire quelques retouches, mais impossible d'avoir les colones qui se colorent si 2 colonnes sont en vertes, par exemple si on est en colone 1 et que la colone 2 est verte, la 3ieme devrait passer au rouge, mais rien ne passe..
Le vert passe bien mais pas la couleur "automatique", je ne sais pas si c'est au niveau de la fonction "setColorCell" que ça bloque ou au niveau de la fonction click du numéros..
Aussi à la place de $('.my-class[data-col..) si j'ai bien compris le "my-class" corréspond à ".numeros"
J'ai aussi corrigé le "backround-color" ou le "g" avait été oublié, mais sinon je ne vois pas où ça peut bloquer..

Voici le code que j'ai

//récupère la couleur de la cellule aux coordonnées ligne/colonne
function getColorCell(numRow,numCol){
    var CelCible = $('.numeros[data-col="' + numCol + '"][data-row="'+numRow+'"]');
    return CelCible.css('background-color');
  }
  
  //Définit la couleur de la cellule aux coordonnées ligne/colonne
  function setColorCell(numRow,numCol,color){
    var CelCible = $('.numeros[data-col="' + numCol + '"][data-row="'+numRow+'"]');
    CelCible.css('background-color',color );
  }
  
  $(".numeros").click(function(){
    //ici tu détèctes que tu cliques sur une div
    // donc.. c'est ICI que tu dois faire la vérification
    
    //La couleur de la cellule cliquée
    var ColorCel = $(this).css('background-color', 'green');
    
    
    //pour cette div (identifiée par $(this) tu peux récupérer la ligne et la colonne dans laquelle elle se trouve
     var NumCol = $(this).data('col');
     var NumRow = $(this).data('row');
     
     
     var ColorCel2 = getColorCell(NumCol +1 ,NumRow + 2);
     var ColorCel3 = getColorCell(NumCol +2 ,NumRow + 4);
     
     //Si on en en colonne 1
    if(NumCol == 1 ){
     
     // colonne 1 et 2 en vert .. donc on met la troisième en rouge
     if((ColorCel == 'green') && (ColorCel2 == 'green')){
       setColorCell(NumCol +2 ,NumRow + 4,'red'); //on met la couleur en rouge à la colonne 3
     }else if((ColorCel == 'green') && (ColorCel3 == 'green')){
       // colonne 1 et 3 en vert .. donc on met la deuxième en rouge
       setColorCell(NumCol +1 ,NumRow + 2,'red'); //on met la couleur en rouge à la colonne 2
     }
     
     //Idem pour l'autre digonale
     
     
     
    }else if( NumCol == 2 ){
      //idemn que pour les colonne 1 .. mais avec 
      // - la deuxième colonne qui se trouve à la col + 1
      // - la troisième colonne qui se trouve à la col - 1
     
     
    }else if( NumCol == 3 ){
      //idemn que pour les colonne 1 .. mais avec 
       // - la deuxième colonne qui se trouve à la col - 1
       // - la troisième colonne qui se trouve à la col - 2
    
    }
       
     
  });  

//Bouton recommencer
    $erase = $("#erase");
    $erase.click(function(){
        $('.numeros').css('background-color', 'white');
    });

CodePen: https://codepen.io/Frank-Ngy/pen/XvaYzV

Réponse 2 / 6

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
8 août 2019 à 11:57

Le background color est retourné en RGB ( tu l'aurais vu si tu avais mis (comme moi), des console.log dans ton code
Bref,
Voici un code fonctionnel

<html>
<head>
<style>

.tableNum{
    margin-top: 100px;
    border: 5px solid #038c00;
    border-radius: 40px;
    background-color: #f9fbffc9;
    text-align: center;
    color: black;
}

#tableau-num{
    display: flex;
    flex-flow: column;
    width: 800px;
    margin: auto;
    margin-top: 10px;
}
  
.range{
    display: flex;
    justify-content: center;
}
  
.numeros{
    border: 2px solid black;
    width: 20%;
    background-color: white;
}

.numRed{
    background-color: red;
    border: 2px solid black;
    width: 20%;
}

.numGreen{
    background-color: green;
    color: white;
    border: 2px solid black;
    width: 20%;
}

#erase{
    border: 3px solid white;
    border-radius: 10px;
    color: white;
    background: blue;
    margin-top: 8px;
    margin-bottom: 8px;
}
</style>
</head>
<body>

<!-- Tableau numéros -->
            <section class="container tableNum">
                <div id="tableau-num">
                    <div id="col1" class="range">
                        <div class="numeros" data-col="1" data-row="1" id="num1">1</div>
                        <div class="numeros" data-col="2" data-row="1" id="num2">2</div>
                        <div class="numeros" data-col="3" data-row="1" id="num3">3</div>
                    </div>
                    <div id="col2" class="range">
                        <div class="numeros" data-col="1" data-row="2" id="num4">4</div>
                        <div class="numeros" data-col="2" data-row="2" id="num5">5</div>
                        <div class="numeros" data-col="3" data-row="2" id="num6">6</div>
                    </div>
                    <div id="col3" class="range">
                        <div class="numeros" data-col="1" data-row="3" id="num7">7</div>
                        <div class="numeros" data-col="2" data-row="3" id="num8">8</div>
                        <div class="numeros" data-col="3" data-row="3" id="num9">9</div>
                    </div>
                    <div id="col4" class="range">
                        <div class="numeros" data-col="1" data-row="4" id="num10">10</div>
                        <div class="numeros" data-col="2" data-row="4" id="num11">11</div>
                        <div class="numeros" data-col="3" data-row="4" id="num12">12</div>
                    </div>
                    <div id="col5" class="range">
                        <div class="numeros" data-col="1" data-row="5" id="num13">13</div>
                        <div class="numeros" data-col="2" data-row="5" id="num14">14</div>
                        <div class="numeros" data-col="3" data-row="5" id="num15">15</div>
                    </div>
                    <div id="col6" class="range">
                        <div class="numeros" data-col="1" data-row="6" id="num16">16</div>
                        <div class="numeros" data-col="2" data-row="6" id="num17">17</div>
                        <div class="numeros" data-col="3" data-row="6" id="num18">18</div>
                    </div>
                    <div id="col7" class="range">
                        <div class="numeros" data-col="1" data-row="7" id="num19">19</div>
                        <div class="numeros" data-col="2" data-row="7" id="num20">20</div>
                        <div class="numeros" data-col="3" data-row="7" id="num21">21</div>
                    </div>
                    <div id="col8" class="range">
                        <div class="numeros" data-col="1" data-row="8" id="num22">22</div>
                        <div class="numeros" data-col="2" data-row="8" id="num23">23</div>
                        <div class="numeros" data-col="3" data-row="8" id="num24">24</div>
                    </div>
                    <div id="col9" class="range">
                        <div class="numeros" data-col="1" data-row="9" id="num25">25</div>
                        <div class="numeros" data-col="2" data-row="9" id="num26">26</div>
                        <div class="numeros" data-col="3" data-row="9" id="num27">27</div>
                    </div>
                    <div id="col10" class="range">
                        <div class="numeros" data-col="1" data-row="10" id="num28">28</div>
                        <div class="numeros" data-col="2" data-row="10" id="num29">29</div>
                        <div class="numeros" data-col="3" data-row="10" id="num30">30</div>
                    </div>
                    <div id="col11" class="range">
                        <div class="numeros" data-col="1" data-row="11" id="num31">31</div>
                        <div class="numeros" data-col="2" data-row="11" id="num32">32</div>
                        <div class="numeros" data-col="3" data-row="11" id="num33">33</div>
                    </div>
                    <div id="col12" class="range">
                        <div class="numeros" data-col="1" data-row="12" id="num34">34</div>
                        <div class="numeros" data-col="2" data-row="12" id="num35">35</div>
                        <div class="numeros" data-col="3" data-row="12" id="num36">36</div>
                    </div>
                </div>
                <p id="numCheck"><span class="redNum"></span></p>
                <button id="erase">recommencer</button>
            </section>
<!-- JQuery -->
        <script
			  src="https://code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous"></script>
        <script>
        //--------------------------------------------------//
        //pour convertir les couleur RGB en Hexa
        //--------------------------------------------------//
        
        var green = "#008000";
        
        var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

        //Function to convert rgb color to hex format
        function rgb2hex(rgb) {
            if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

            rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
            function hex(x) {
                return ("0" + parseInt(x).toString(16)).slice(-2);
            }
            return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
        }

        
        
        //récupère la couleur de la cellule aux coordonnées ligne/colonne
        function getColorCell(numCol,numRow){
            console.log('getColorCell  Row/Col', numRow, numCol);
            var CelCible = $('.numeros[data-col="' + numCol + '"][data-row="'+numRow+'"]');
            console.log(CelCible.html());//pour voir quelle est le numéro de la cellule
            var rgbColor = CelCible.css('background-color');
            console.log(rgbColor);
            return rgb2hex(rgbColor);
          }
          
          //Définit la couleur de la cellule aux coordonnées ligne/colonne
          function setColorCell(numCol,numRow,color){
            console.log('getColorCell  Row/Col', numRow, numCol);
            var CelCible = $('.numeros[data-col="' + numCol + '"][data-row="'+numRow+'"]');
            console.log(CelCible.html());//pour voir quelle est le numéro de la cellule
            CelCible.css('background-color',color );
          }
          
          $(".numeros").click(function(){
             console.log('numeros Click');
            //ici tu détèctes que tu cliques sur une div
            // donc.. c'est ICI que tu dois faire la vérification
            
            //La couleur de la cellule cliquée
            $(this).css('background-color', green);
            var ColorCel = green;
            
            
            //pour cette div (identifiée par $(this) tu peux récupérer la ligne et la colonne dans laquelle elle se trouve
             var NumCol = $(this).data('col');
             var NumRow = $(this).data('row');
             console.log('Cellule aux coordonnées :',NumCol,NumRow);
             
            
             
             //Si on en en colonne 1
            if(NumCol == 1 ){
              var ColorCel2 = getColorCell(NumCol +1 ,NumRow + 2);
              var ColorCel3 = getColorCell(NumCol +2 ,NumRow + 4);
              console.log('ColorCel2',ColorCel2);
              console.log('ColorCel3',ColorCel3);
             // colonne 1 et 2 en vert .. donc on met la troisième en rouge
             if( ColorCel == green && ColorCel2 == green){
               setColorCell(NumCol +2 ,NumRow + 4,'red'); //on met la couleur en rouge à la colonne 3
             }else if( ColorCel == 'green' && ColorCel3 == 'green'){
               // colonne 1 et 3 en vert .. donc on met la deuxième en rouge
               setColorCell(NumCol +1 ,NumRow + 2,'red'); //on met la couleur en rouge à la colonne 2
             }
             
             //Idem pour l'autre digonale
             
             
             
            }else if( NumCol == 2 ){
              //idemn que pour les colonne 1 .. mais avec 
              // - la deuxième colonne qui se trouve à la col + 1
              // - la troisième colonne qui se trouve à la col - 1
             
             
            }else if( NumCol == 3 ){
              //idemn que pour les colonne 1 .. mais avec 
               // - la deuxième colonne qui se trouve à la col - 1
               // - la troisième colonne qui se trouve à la col - 2
            
            }
               
             
          });  

        //Bouton recommencer
            $erase = $("#erase");
            $erase.click(function(){
                $('.numeros').css('background-color', 'white');
            });
            
                      
              
        </script>
</body>
</html>

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
8 août 2019 à 15:28

J'y suis presque... il me reste un petit problème si une cellule n'est pas définie
Par exemple si je coche le 8 en premier et le 1 en second, dans ce cas la case 15 devrait changer de couleur, mais comme il cherche d'abord la cellule qui se trouve en dehors des numéros, il retourne une valeur "undefined" et bloque le code pour la suite ..
J'ai tenté une condition si cette variable n'existe pas, mais visiblement je m'y prend mal :

    //pour convertir les couleur RGB en Hexa
    //--------------------------------------------------//

    var green = "#008000";

    var hexDigits = new Array
    ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

    //Function to convert rgb color to hex format
    function rgb2hex(rgb) {
        if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    }



    //récupère la couleur de la cellule aux coordonnées ligne/colonne
    function getColorCell(numCol,numRow){
        console.log('getColorCell  Row/Col', numRow, numCol);
        var CelCible = $('.numeros[data-col="' + numCol + '"][data-row="'+numRow+'"]');
        console.log(CelCible.html());//pour voir quelle est le numéro de la cellule
        var rgbColor = CelCible.css('background-color');
        console.log(rgbColor);
        return rgb2hex(rgbColor);
    }

    //Définit la couleur de la cellule aux coordonnées ligne/colonne
    function setColorCell(numCol,numRow,color){
        console.log('getColorCell  Row/Col', numRow, numCol);
        var CelCible = $('.numeros[data-col="' + numCol + '"][data-row="'+numRow+'"]');
        console.log(CelCible.html());//pour voir quelle est le numéro de la cellule
        CelCible.css('background-color',color );
    }

    $(".numeros").click(function(){
        console.log('numeros Click');
        //ici tu détèctes que tu cliques sur une div
        // donc.. c'est ICI que tu dois faire la vérification

        //La couleur de la cellule cliquée
        $(this).css('background-color', green);
        var ColorCel = green;


        //pour cette div (identifiée par $(this) tu peux récupérer la ligne et la colonne dans laquelle elle se trouve
            var NumCol = $(this).data('col');
            var NumRow = $(this).data('row');
            console.log('Cellule aux coordonnées :',NumCol,NumRow);
            

            
            //Si on en en colonne 1
        if(NumCol == 1 ){
            var ColorCel2 = getColorCell(NumCol +1 ,NumRow + 2);
            var ColorCelm2 = getColorCell(NumCol +1 ,NumRow - 2);
            var ColorCel3 = getColorCell(NumCol +2 ,NumRow + 4);
            var ColorCelm3 = getColorCell(NumCol +2 ,NumRow - 4);
            console.log('ColorCel2',ColorCel2);
            console.log('ColorCelm2',ColorCelm2);
            console.log('ColorCel3',ColorCel3);
            console.log('ColorCelm3',ColorCelm3);
            // colonne 1 et 3 en vert .. donc on met la deuxième en rouge
            if( ColorCel == green && ColorCel3 == green){
                setColorCell(NumCol +1 ,NumRow +2,'red'); //on met la couleur en rouge à la colonne 2
            }else if( ColorCel == green && ColorCel2 == green){
                // colonne 1 et 2 en vert .. donc on met la troisième en rouge
                setColorCell(NumCol +2 ,NumRow +4,'red'); //on met la couleur en rouge à la colonne 3
            }else if((ColorCel == green && ColorCelm2 == green)||(ColorCel == green && !ColorCelm2)){
                // colonne 1 et 2 en vert .. donc on met la troisième en rouge
                setColorCell(NumCol +2 ,NumRow -4,'red'); //on met la couleur en rouge à la colonne 3
            }else if((ColorCel == green && ColorCelm3 == green)||(ColorCel == green && !ColorCelm3)){
                // colonne 1 et 3 en vert .. donc on met la deuxième en rouge
                setColorCell(NumCol +1 ,NumRow -2,'red'); //on met la couleur en rouge à la colonne 2
            }
            
        }else if( NumCol == 2 ){
            //idemn que pour les colonne 1 .. mais avec 
            // - la prmière colonne qui se trouve à la col - 1
            // - la troisième colonne qui se trouve à la col + 1
            var ColorCel1 = getColorCell(NumCol -1 ,NumRow + 2);
            var ColorCelm1 = getColorCell(NumCol -1 ,NumRow - 2);
            var ColorCel3 = getColorCell(NumCol +1 ,NumRow + 2);
            var ColorCelm3 = getColorCell(NumCol +1 ,NumRow - 2);
            console.log('ColorCel1',ColorCel1);
            console.log('ColorCelm1',ColorCelm1);
            console.log('ColorCel3',ColorCel3);
            console.log('ColorCelm3',ColorCelm3);
            // colonne 2 et 1 en vert .. donc on met la troisième en rouge
            if( ColorCel == green && ColorCel1 == green){
                setColorCell(NumCol +1 ,NumRow -2,'red'); //on met la couleur en rouge à la colonne 3
            }else if( ColorCel == green && ColorCel3 == green){
                // colonne 2 et 3 en vert .. donc on met la première en rouge
                setColorCell(NumCol -1 ,NumRow -2,'red'); //on met la couleur en rouge à la colonne 1
            }else if((ColorCel == green && ColorCelm1 == green)||(ColorCel == green && !ColorCelm1)){
                // colonne 2 et 1 en vert .. donc on met la troisième en rouge
                setColorCell(NumCol +1 ,NumRow +2,'red'); //on met la couleur en rouge à la colonne 3
            }else if((ColorCel == green && ColorCelm3 == green)||(ColorCel == green && !ColorCelm3)){
                // colonne 2 et 3 en vert .. donc on met la première en rouge
                setColorCell(NumCol -1 ,NumRow +2,'red'); //on met la couleur en rouge à la colonne 1
            }
            
        }else if( NumCol == 3 ){
            //idemn que pour les colonne 1 .. mais avec 
            // - la deuxième colonne qui se trouve à la col - 1
            // - la première colonne qui se trouve à la col - 2
            var ColorCel2 = getColorCell(NumCol -1 ,NumRow + 2);
            var ColorCelm2 = getColorCell(NumCol -1 ,NumRow - 2);
            var ColorCel1 = getColorCell(NumCol -2 ,NumRow + 4);
            var ColorCelm1 = getColorCell(NumCol -2 ,NumRow - 4);
            console.log('ColorCel2',ColorCel2);
            console.log('ColorCelm2',ColorCelm2);
            console.log('ColorCel1',ColorCel1);
            console.log('ColorCelm1',ColorCelm1);
            // colonne 3 et 2 en vert .. donc on met la première en rouge
            if( ColorCel == green && ColorCel2 == green){
                setColorCell(NumCol -2 ,NumRow +4,'red'); //on met la couleur en rouge à la colonne 1
            }else if( ColorCel == green && ColorCel1 == green){
                // colonne 3 et 1 en vert .. donc on met la deuxième en rouge
                setColorCell(NumCol -1 ,NumRow +2,'red'); //on met la couleur en rouge à la colonne 2
            }else if((ColorCel == green && ColorCelm2 == green)||(ColorCel == green && !ColorCelm2)){
                // colonne 3 et 2 en vert .. donc on met la première en rouge
                setColorCell(NumCol -2 ,NumRow -4,'red'); //on met la couleur en rouge à la colonne 1
            }else if((ColorCel == green && ColorCelm1 == green)||(ColorCel == green && !ColorCelm1)){
                // colonne 3 et 1 en vert .. donc on met la deuxième en rouge
                setColorCell(NumCol -1 ,NumRow -2,'red'); //on met la couleur en rouge à la colonne 2
            }
        }
    });  

    //Bouton recommencer
    $erase = $("#erase");
    $erase.click(function(){
        $('.numeros').css('background-color', 'white');
    });

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
8 août 2019 à 15:43

As tu regardé de quelle variable il s'agit ?
Le message d'erreur qui apparait dans la console ?
As tu cherché comment vérifier en javascript comment vérifier si une variable est "undefined" ?

Je pourrais te donner la réponse.... mais franchement.. je n'ai pas l'impression que tu fasses beaucoup d'efforts dans tes recherches.
Donc réponds à mes questions... montre moi ce que tu as testé (et juste le bout de code concerné.. pas tous le code... )...
Et si vraiment tu n'y arrives pas.. je verrai pour te donner la solution.

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
8 août 2019 à 16:07

Il s'agit de la variables (enfin des variables) qui comportent un row négatifs donc ici les variables
ColorCelm1, ColorCelm2, ColorCelm3
Le message d'érreur qui apparait est "TypeError: rgb is undefined"
rgb corréspond à la fonction "function rgb2hex(rgb)" qui est censé donner la couleur rouge à la case qui corréspond donc à ColorCelm1 ou ColorCelm2 ou ColorCelm3
Mais si cette dernière n'éxiste pas, donc le rgb sera undefined (ce qui est normal) et donc bloque la suite
Donc pour tester l'éxistence de la variable j'ai écris une condition qui voudrait dire "si ColorCelm1 n'éxiste pas, éxecute quand même le code" "!ColorCelm1", normalement de ce que j'ai pu lire c'est de cette manière qu'on teste l'éxistence d'une variable
Sinon je devrai tester directement dans la fonction l'éxistence du parametre "rgb" mais je ne saurai pas vraiment où placer la condition ni comment l'écrire proprement pour ne pas affecter cette fonction (je vois bien qu'il y a des regex, mais je ne la comprend pas beaucoup pour autant, même si je sais qu'elle sers à convertir une couleur (rgb) en format Hexadecimal)

Sinon je devrai tester directement dans la fonction l'éxistence du parametre "rgb" mais je ne saurai pas vraiment où placer la condition ni comment l'écrire proprement pour ne pas affecter cette fonction (

Oui.
Et donc ..

//Function to convert rgb color to hex format
    function rgb2hex(rgb) {
       if(typeof(rgb)!='undefined' && rgb!=null){
          if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

          rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
          function hex(x) {
              return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    
       }else{
         return false;
      }
   }

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
8 août 2019 à 17:06

C'était vraiment tout simple, il me manquais le "typeof(rgb)", le retour "null" et le return false pour que le code continue.. j'assume complètement le fait que je sois néophyte mais j'essaye d'apprendre en même temps, comme je peux, et je te remercie de l'avoir pris en considération pour m'avoir aidé jusque là !

Réponse 3 / 6

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
2 août 2019 à 10:16

Bonjour,

il te suffirait visiblement de boucler sur toutes les DIV ayant la class "numeros" et de regarder leur couleur...

$(".numeros").each(function(i,el){
  bcolor = el.css("background-color");
  if(bcolor =='green'){
   //...
  }

});

Réponse 4 / 6

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
2 août 2019 à 10:39

Merci pour ta réponse, cependant j'ai besoin que ce soit en fonction de certains numéros spécifiques, et non pas tous les numéros, avec une boucle ce serais tous les numéros qui seraient afféctés

Par exemple
Si 1 et 8 sont verts alors je veux que 15 soit rouge
ou encore si 15 et 1 sont verts alors je veux que ce soit 8 qui soit rouge

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
2 août 2019 à 12:17

Et tu penses que je suis capable de lire dans ton esprit pour deviner quelles sont les bonnes combinaisons ? (dans ce cas.. faut vite que j'aille deviner les chiffres du loto... )
Je t'ai donné un exemple... à toi de l'adapter à tes besoins !
Et si tu n'y arrives pas... reviens nous voir en prenant la peine d'expliquer CLAIREMENT et COMPLETEMENT ce que tu souhaites faire ainsi que la "logique" qu'il faut appliquer.
En l'état.. je ne peux rien de plus pour toi.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

FrankN
3 août 2019 à 12:32

Ok donc le principe:
Sur la grille de 36 numéros il faut que quand on click sur un numéro celui ci change de couleur (pour signaler qu'il a été coché) ca c'est bon
Ensuite il y a les combinaisons, quand 2 numéros sont cochés un troisième qui n'a pas été clicke change de couleur par exemple avec le numéro 1 et le numéro 15 de cochés ce sera le numéro 8 qui sera coloré
Il y a 48 combinaisons possible donc est ce que je dois vraiment vous exposer les 48 combinaisons possibles pour avoir une idée de code qui pourrait faire ce que je demande ( par exemple si 15 et 20 sont verts, alors 25 deviens rouge) ou y a t-il une solution ou j'aurai juste à remplacer les différents id des numéros dans le code et qui me donnerait le même résultat ?
J'espère être assez clair, si ce n'est pas le cas merci de ne pas vous énerver j'essaierai de mieux faire ^^'

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
3 août 2019 à 16:37

Je te repose la question... quelle est la logique ?
Comment sais tu quelle nombre il faut cocher ?

Frank_N
3 août 2019 à 17:21

D’accord,
En fait il faut toujours 3 chiffres qui se complètent dans une diagonale avec un saut de ligne, donc par exemple si on prend le chiffre 14 il y a les possibilités suivante
7 - 14 -> 21 [ 21 doit être coché quand les deux 7-14 sont cochés]
14 - 21 -> 7
7 - 21 -> 14
9 - 14 -> 19
9 - 19 -> 14
14 - 19 -> 9

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > Frank_N
4 août 2019 à 11:07

Lorsque tu coches une case, tu détermines dans quelle ligne, Colonne tu te trouves puis Tu vérifies les cellules aux lignes/colonnes qui devraient correspondre à tes conditions..
Un truc du genre :

Si tu es dans la colonne 1 :
Si la cellule à (
- Col + 1
- Ligne + 2
) est coché .. alors .. Col+2 , Ligne + 4 => Devient vert
Ou
Si la cellule à ( Col + 2 , Ligne + 4 ) est cochée, Alors, Col + 1 ,Ligne + 2 Doit être cochée

Si tu es en Colonne 2 ..
Si Col - 1 , Ligne - 2 est cochée.. ou Si Col +1 Ligne + 2 ..

Pour t'aider à "localiser" tes cellules, tu pourrais ajouter, dans ton html, des data attributes
par exemple

 <div class="numeros" data-col="1"  data-row="1"  id="num1">1</div>

Et en jquery, pour lire les data-attributes

var col = $(this).data("col");

Et pour chercher un élément via son data attribute, tu peux utiliser un selecteur de la forme

$('*[data-col="2"]');

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
Modifié le 4 août 2019 à 15:14

Merci pour cette réponse que j'essaye de comprendre, concrêtement si on prend l'exemple du numéro 8 :
Il à pour "coordonnées" le

data-col="2"

data-row="3"

on est d'accord ?
Donc en jquery, pour le séléctionner ça donnerait

$col2 = $('*[data-col="2"]');
$row3 = $('*[data-row="3"]')
$num8 = $col2 + $row3;

Ensuite ça bloque, la manière dont je comprend et ce que j'aimerais est la suivante:
Si le numéro 8 est coché donc comment savoir si $num8 est séléctionné (a part le

$num8.css('backround-color) == 'green'

, je ne vois pas comment faire
Donc on aurait

if ($num8 est séléctionné){
    if (col + 1, row +2) sont séléctionnés{
        (col - 1, row - 2).css('backround-color) == 'red'; (c'est quand 2 cases sont vertes que l'autre deviens rouge)
}
     else if (col +1, row -2) sont séléctionnés{
                 (col -1, row +2).css('backround-color) == 'red';}
     else if (col -1, row -2) sont séléctionnés{
                 (col +1, row +2).css('backround-color) == 'red';}
     else if (col -1, row +2) sont séléctionnés{
                 (col +1, row -2).css('backround-color) == 'red';
     }
}

Mon problème ici serait comment séléctionner les éléments je pense, si j'ai bien compris

Sais tu comment fonctionne jquery ??
Ce que sont les sélecteurs et comment les utiliser ?
... je suppose que non...
Il va donc falloir que tu te formes sur le sujet...

Réponse 6 / 6

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
Modifié le 4 août 2019 à 20:03

Je vais m'y prendre autrement dans ce cas :
Je récupère les données au click, j'insère la donnée dont j'ai besoin dans un tableau, et ensuite je fais une vérification dans ce tableau pour voir si certaines valeurs des combinaisons sont présentes, et j'applique des conditions pour chacunes des combinaisons
Pour l'instant le code est le suivant mais les valeurs ne veulent pas s'insérer dans le tableau, peut être que le mélange JS et JQuery n'est pas bon quelque part ? Quand je fais un console.log de tableNum après avoir cliqué sur un numéro, il me dit is not defined, par contre le console.log de $col, $row et $numero fonctionne bien

//Ensemble des numéros
    $num = $(".numeros");

    // Tableau des numéros cochés
    var tableNum = [];

    //Bouton recommencer
    $erase = $("#erase");
    $erase.on("click", function(){
      $num.css('background-color', 'white');
    })

    //Data
    $col1 = $('*[data-col="1"]');
    $col1.click(function() {
        $(this).css('background-color', 'green');
        $row = $(this).data("row");
        $col = $(this).data("col");
        $numero = $(this).attr('id');
        tableNum.push($numero);
    });
    $col2 = $('*[data-col="2"]');
    $col2.click(function() {
        $(this).css('background-color', 'green');
        $row = $(this).data("row");
        $col = $(this).data("col");
        $numero = $(this).attr('id');
        tableNum.push($numero);
    });
    $col3 = $('*[data-col="3"]');
    $col3.click(function() {
        $(this).css('background-color', 'green');
        $row = $(this).data("row");
        $col = $(this).data("col");
        $numero = $(this).attr('id');
        tableNum.push($numero);
    });

Discussions similaires

sertissage des cables rj45

Qui sont les personnes dans mon ajout rapide de Snapchat ?

Couleur transparente

comment brancher cette multitude de fils

Comment savoir comment on nous a ajouté sur Snap