Bonjour à tous,

Je suis en train de coder un échiquier, qui se présente sous la forme d'une table HTML de 64 cases. Chaque case est munie d'un ID. En JS, je code la fonction "coup_jouable" qui en gros, sélectionne la case, et regarde ou peut se déplacer le pion situé sur cette case

V'la un extrait du code :

<tr>
      <td class="casenoire"  id="11" onmousedown="coup_jouable('11');" style="height: 73px; width: 67px;">&#9814;<br>
      </td>
      <td class="caseblanche" id="12" onmousedown="coup_jouable('12');" style="height: 73px; width: 67px;">&#9816;<br>
      </td>
...

Dans l'état actuel des choses il faut que je fasse, un onmousedown pour chaque case ... bref, c'est long, c'est ch***t.

D'où ma question, comment faire pour que ma fonction "coup_jouable" s'applique à la case sur laquelle je clique, mais sans onmousedown, ou du moins pas de cette manière ?

Merci de votre Réponse
Covich

En utilisant jQuery tu pourras avoir de très bon résultat :

<tr>
      <td class="casenoire case"  id="11" style="height: 73px; width: 67px;">&#9814;<br>
      </td>
      <td class="caseblanche case" id="12" style="height: 73px; width: 67px;">&#9816;<br>
      </td>

$(document).ready(function()
{
  $('.case').mousedown(coup_jouable($(this).attr('id')));
});

Petit plus :

1/ Ton code n'est pas optimisé au niveau du CSS, tu pourrais simplement faire :

.case { height: 73px; width: 67px; }

2/ Les id ne peuvent commencer que par une lettre et non un chiffre comme ici, tu peux donc mettre id="case_X" au lieu de id="X"

Le javascript que va avec :

$(document).ready(function()
{
  var id = $(this).attr('id').split('_');
  var id = id[id.length-1];

  $('.case').mousedown(coup_jouable(id));
});

OK, je vais me pencher sur l'utilisation de JQuery

Pour les paramètres de taille des cases, je les avais ajouter dans le CSS, mais oublié de les supprimer dans le HTML.

Merci pour ces conseils, je reviendrai surement par ici si nécessaire

Sinon si tu souhaites éviter l'utilisation de JQuery juste pour cela (mais si tu l'utilise par la suite, alors mon code n'est pas nécessaire), tu peux appliquer la fonction dynamiquement (comme le fait JQuery en fait):

window.onload=function(){
 var liste=document.querySelectorAll('.case'); //on récupère la liste de toutes les cases
 var i=liste.length;
 while(i--){
  liste[i].onmousedown=function(){coup_jouable(this.id);}; // on applique à chaque case la fonction désirée lors du déclenchement de onmousedown
 }
};

Cependant document.querySelectorAll n'est pas compatible avec les version d'IE inférieur à 8
Sinon si tous les <td> de ta table correspondent uniquement à des cases (en en supposant que ta table a un id nommé 'table')
Tu peux remplacer la ligne 2 par: var liste=document.getElementById('table').getElementsByTagName('td');


Et je plussoie les recommandations de CactO_o's

Ok, alors ton morceau de code fonctionne bien restimel.

Mais en revanche le code jQuery ne réagit pas, alors qu'il est préférable.

j'ai pourtant chargé jquery.js dans mon HTML, aurai-je oublié autre chose ?

JQuery n'est pas forcément préférable. Ça dépend de tes besoins: est-ce que tu l'utilises (ou as l'intention de l'utiliser) ailleurs dans ton code? Si ce n'est pas le cas, alors je ne pense pas que ce soit une bonne chose d'utiliser JQuery seulement pour ça.
Si tu cherches un équivalent du code qu'à donné CactO_o's pour retrouver le format de ton id alors que tu les as transformé en "case_X" à la place de "X", je te conseille alors de chercher du côté de substring ( oldID=id.substring(4,id.length); )


Je ne suis pas expert JQuery, donc je ne pourrais pas bien t'aider pour le faire fonctionner. Mais il me semble qu'il suffit de charger le fichier pour que ça fonctionne.

En effet si tu ne pense pas utilisé jQuery autre part ce n'est pas vraiment la peine, par contre c'est une bonne habitude à prendre si tu utilises du JavaScript (car il permet d'avoir un code très portable sur les différents navigateurs).

Sinon pour faire fonctionner jQuery il suffit de linker le jquery.js et le code donnée (dans des balises script) et tout devrais marcher..

PS : si tu codes beaucoup en JS tu as le module Web-Developer qui donne les erreurs JavaScript

Citation : CactO_o's

En effet si tu ne pense pas utilisé jQuery autre part ce n'est pas vraiment la peine, par contre c'est une bonne habitude à prendre si tu utilises du JavaScript (car il permet d'avoir un code très portable sur les différents navigateurs).

Euh... La phrase est tournée bizarrement. Je la verrai plutôt comme ça...

Citation

En effet si tu ne pense pas utiliser jQuery autre part ce n'est pas vraiment la peine. Par contre, utiliser un framework peut être une bonne habitude à prendre si tu utilises du JavaScript (car il permet d'avoir un code très portable sur les différents navigateurs).

Mais bon... Je chipote un peu...

Linker une librairie de centaines de ko pour initialiser des onmouseover...
Initialise l'onmouseover de toutes tes cases dans une boucle
en utilisant la méthode document.getElementById(id).setAttribute().

Ça marche, je vais pas m'encombrer du JQuery, d'autant que je n'ai juste besoin d'appliquer la fonction "case_jouable" à toutes les cases. Et de surcroit, j'arrive pas à faire marcher la solution JQuery

Merci à tous en tout cas

Juste une autre question en passant, qui ne relève plus du JS mais du CSS. lorsque je sélectionne une case, je colore sa bordure en vert. Le problème c'est que la bordure déforme la case, et par là tout le tableau.

Comment faire pour "verrouiller" la taille d'une case, ou pour faire une bordure interne, qui ne déborde pas vers l'extérieur ?

Citation : CovichMk1

Ça marche, je vais pas m'encombrer du JQuery, d'autant que je n'ai juste besoin d'appliquer la fonction "case_jouable" à toutes les cases. Et de surcroit, j'arrive pas à faire marcher la solution JQuery

Merci à tous en tout cas

Juste une autre question en passant, qui ne relève plus du JS mais du CSS. lorsque je sélectionne une case, je colore sa bordure en vert. Le problème c'est que la bordure déforme la case, et par là tout le tableau.

Comment faire pour "verrouiller" la taille d'une case, ou pour faire une bordure interne, qui ne déborde pas vers l'extérieur ?

Si le background de ton échiquier est blanc, met un border blanc par défaut + un border blanc en onmouseout à toute tes cases