11521 sujets

JavaScript, DOM et API Web HTML5

Changer la couleur d'un petit carré par un clic

Bonjours à tous !!!
J'essaie de créer un cadre de dame, évidemment dans un cadre de dame se trouve d'autres petits cadres (blancs et noirs). Donc j'ai tenté par une fonction en javascript de changer la couleur des petits cadre du genre quand on clique sur un petit cadre sa couleur change en rouge et quand on clique sur un autre que l'ancien retrouve sa couleur normal et que le nouveau change en rouge ainsi de suite mais ça marche pas Smiley decu .
Voici mon code:



<table style="width: 20%; margin-left: 600px; margin-top: 100px;">

  <tr >

   <td class="carre1" onmousedown="mDown(this)" ></td>
   <td class="carre2" onmousedown="mDown(this)" ></td>
   <td class="carre1" onmousedown="mDown(this)" ></td>
   <td class="carre2" onmousedown="mDown(this)" ></td>
   <td class="carre1" onmousedown="mDown(this)" ></td>
   <td class="carre2" onmousedown="mDown(this)" ></td>
   <td class="carre1" onmousedown="mDown(this)" ></td>
   <td class="carre2" onmousedown="mDown(this)" ></td>


  </tr>

  <tr >

   <td class="carre2" onmousedown="mDown(this)" ></td>
   <td class="carre1" onmousedown="mDown(this)" ></td>
   <td class="carre2" onmousedown="mDown(this)" ></td>
   <td class="carre1" onmousedown="mDown(this)" ></td>
   <td class="carre2" onmousedown="mDown(this)" ></td>
   <td class="carre1" onmousedown="mDown(this)" ></td>
   <td class="carre2" onmousedown="mDown(this)" ></td>
   <td class="carre1" onmousedown="mDown(this)" ></td>


  </tr>


<tr >

 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>


</tr>

<tr >

 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>


</tr>

<tr >

 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>


</tr>

<tr >

 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>


</tr>

<tr >

 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>


</tr>

<tr >

 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>


</tr>

<tr >

 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>


</tr>

<tr >

 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>
 <td class="carre2" onmousedown="mDown(this)" ></td>
 <td class="carre1" onmousedown="mDown(this)" ></td>


</tr>


</table>







.carre1{
  background-color: black;

}
tr{
  height: 30px;
  border: solid black 2px;
}
td{
    border: solid black 2px;
}





function mDown(obj) {
    obj.style.backgroundColor = "red";
    
}
Modérateur
Salut !


Alors, plutot que de répéter "onmousedown="mDown(this)" partout dans ton HTML la bonne pratique veut que tu donne juste une classe commune a tout tes carrés :


[...]
 <td class="carre carre1" ></td>
 <td class="carre carre2"></td>
 <td class="carre carre1" ></td>
 <td class="carre carre2"></td>
 <td class="carre carre1" ></td>
 <td class="carre carre2"></td>
 <td class="carre carre1" ></td>
 <td class="carre carre2"></td>
[...]


Ensuite dans ton Js tu vas aller chercher tout les élément avec la classe "carre" ( getelementsbyclassname ) et avec une boucle tu vas leur mettre un eventlistener addeventlistener qui va : premierement cherche les élément avec la classe "carrerouge" si il y en a et leur enlever cette classe puis rajouter la classe "carrerouge" sur l'élément cliqué ( classlist ).

En gros. Smiley lol

Tu vas voir c'est fun !

Bon code et reviens nous voir quand tu auras fait 2 ou 3 essais et si si tu as des soucis pour mettre tout ça en place !
Modifié par _laurent (16 Jan 2020 - 10:49)
Modérateur
Une boucle for par exemple. Tu connais un peu la programmation ou pas du tout ?

Il y a même un exemple dans le premier lien que je t'ai passé : getelementsbyclassname
var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Bon il est un peu rudimentaire mais au moins c'est fonctionnel.
Et à la place de leur mettre un background rouge comme quand l'exemple, tu vas leur mettre un EventListner au click qui va lancer une action à chaque click.
Modérateur
Bonjour,

Pour un damier, tu peut te servir de :nth-child() pour donner les couleurs de fond aux cases de ton tableau et réduire ainsi le nombre de class a utilisé dans ton HTML.

Comme Laurent te le suggère , tu peut faire une boucle sur une class specifque à tes cases.

Plutôt que de modifié tes styles à la volée, tu peut au click ajouter / enlever une class et laisser ta feuille de styles gérer les ... styles.

Pour la boucle, tu peut te basé sur let (qui me parait plus efficace ici que var), mais je peut me tromper.

exemple d'une boucle qui ajoute sur l'evenement onclick de tous les élements ayant la même class une fonction qui teste une class et l'enleve ou l'ajoute.

case du tableau : 
<td class="sq "></td>


Boucle JavaScript:
for (let e of document.getElementsByClassName("sq")) {
  e.addEventListener("click", function() {
    if (e.classList.contains("red")) {
      e.classList.remove("red");
    } else {
      e.classList.add("red");
    }
  });
}


DEMO : https://codepen.io/gc-nomade/pen/BayOwVQ

Quelques liens :

https://www.alsacreations.com/article/lire/1498-LAPI-classList.html

https://www.alsacreations.com/article/lire/1312-selectionner-les-freres-d-un-element-en-css-nth-child.html

https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child

https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
Modifié par gcyrillus (16 Jan 2020 - 15:51)
merci Laurent. Je suis pas un débutant entend que tel mais je débute en javascript. J'avoue que je comprends votre code mais j'arrive pas à le compléter ce dernier.
gcyrillus euh je crois que vous avez pas bien compris mon inquiétude je veux qu'après avoir cliqué sur un carré 1 et qu'il change de couleur ... je clique sur un carré 2 et lui aussi change de couleur mais juste en ce moment où le carré 2 change de couleur, le carré 1 puisse retrouver sa couleur normale... Merci pour votre aide Smiley sweatdrop
Modérateur
Qu'a tu tenter alors en final sur ces quelques pistes ?

par exemple, en ne gardant que le squelette de la boucle , 
for (let e of document.getElementsByClassName("sq")) {
  e.addEventListener("click", function() {    
//  ici le code a appliquer 
  });
}


Une piste serait , pour rester dans l'idée que l'on laisse les style dans la feuille de style, de se baser sur un ID ( qui ne peut apparaitre qu'une seule fois) que l'on enlève s'il existe déjà , puis que l'on replace sur l'élément que l'on vient de cliquer .(un grand classique Smiley cligne )

Comme une ID est unique et qu'elle n'existe pas avant le premier clique , plutôt que de faire une boucle sur tes cases pour la trouver et l'enlever, on peut tenter de l'enlever brutalement avec un try/catch/finally .

Une possibilité est alors de faire :
for (let e of document.getElementsByClassName("sq")) {
  e.addEventListener("click", function() {
    try {
      var id = document.getElementById("red");
      id.removeAttribute("id");
    } finally {
      e.setAttribute("id", "red");
    }
  });
}


demo : https://codepen.io/gc-nomade/pen/qBEMyYZ

Tu sais maintenant en principe ajouter/enlever une class ou un attribut spécifique . Pour let/var , Il y a dans ce sujet un tutoriel vidéo qui pourrait t’intéresser aussi : https://forum.alsacreations.com/topic-5-86112-1-Tuto-Javascript-Gratuit-les-variables-avec-Var-Let-et-Const.html .

Bon apprentissage
Ah exactement ce que je voulais gcyrillus merci beaucoup et désolé pour le dérangement. Je crois qu'après avoir suivi ce tutoriel je ferai un grand pas en javascript. Encore merci Smiley biggrin
Modérateur
gcyrillus a écrit :
Pour la boucle, tu peut te basé sur let (qui me parait plus efficace ici que var), mais je peut me tromper.

Non non tu as raison Smiley lol Mais je ne le maîtrise pas encore assez bien pour pouvoir le conseiller efficacement et sereinement. Merci du coup Smiley smile
Sujet clos
Aller à