Récupérer une cellule avec un id

Version imprimable

bonjour a tous
voilà je débute en JavaScript actuellement je suis bloqué sur la récupération d’un id alors comme ça paraît pas compliquer, mais pour moi débutant je galère depuis un bon moment maintenant.

voilà mon souci : j’ai créé un tableau avec une 100*cellules.
il se génère automatiquement en JavaScript (chaque cellule a un id)
dans ce tableau, il y a des cellules qui contiennent des class et qui change de place a chaque actualisation de la page du coup je voudrais savoir comment je peux faire pour récupéré l’id de la cellule ou ce trouve la class en sachant que ce n’est jamais la même du coup j’étais parti sur le fait de récupéré l’id en passe pas la class, mais je ne trouve pas quel sélecteur utiliser .

le code qui place la class personnage1 sur le tableau :
Code:

1 2 3 4 5 6 7 8 9 for(let i=0; i<1; i++ ){ let cellid= Math.floor(Math.random()*Math.floor(99)); if(cellid<10){ cellid="0"+cellid } cellid="cell"+cellid; let personnage1=document.getElementById(cellid); personnage1.classList.add("personnage1"); }
du coup je voudrais récupérer l'id de la cellule d'où se place le personnage1

merci bcp.

26/01/2020, 15h29
Invité

Bonjour,

Au pif.... : cellid ? :aie:

N.B.

Code:

for(let i=0; i<1; i++ ){

Donc, pour i = 0... et c'est tout !
Et vu que i n'est pas utilisé dans la suite du code : cette ligne ne sert à rien !
26/01/2020, 15h33
lg12210

jreaux62 .

bonjour le souci et que cellid en'st pas spécifique au personnage1

il n'y aurait pas un moyen de passer par la class pour récupérer l'id où il se trouve
26/01/2020, 15h38
Invité

C'est tout ce qu'on peut déduire de tes 9 lignes de code.

voici le code

Code:

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
// mise en place de la map
function myFunction(){
  let body = document.getElementsByTagName("body")[0];
 
 
  let tbl = document.createElement("table");
  let tblBody = document.createElement("tbody");
 
 
  for (let i = 0; i < 10; i++) {
 
    let row = document.createElement("tr");
 
    for (let j = 0; j < 10; j++) {
 
      var cell = document.createElement("td");
      cell.setAttribute('id',"cell"+ i + j );
 
      console.log(cell);
      row.appendChild(cell);
    }
 
    tblBody.appendChild(row);
  }
 
 
  tbl.appendChild(tblBody);
 
  body.appendChild(tbl);
 
 
  tbl.setAttribute("id", "tableau");
  tbl.setAttribute("width", "600px");
  tbl.setAttribute("height", "600px");
  tbl.setAttribute("border","1");
 
 
  // mise en place des case bloquer 
  function caseNoir(){
    for(var i=0; i<15; i++ ){  
      var cellid=  Math.floor(Math.random()*Math.floor(99));
      if(cellid<10){
        cellid="0"+cellid
      }
      cellid="cell"+cellid;
      var cell=document.getElementById(cellid);
      cell.classList.add("caseBloquer");
    }
  }
  caseNoir();
 
 
 
  // mise en place des joueur 
 
  //joueur1
  for(var i=0; i<1; i++ ){
    var cellid=  Math.floor(Math.random()*Math.floor(99));
    if(cellid<10){
      cellid="0"+cellid
    }
    cellid="cell"+cellid;
    var personnage1=document.getElementById(cellid);
    personnage1.classList.add("personnage1");
 
  }
 
 
  //joueur2 
 
  for(var i=0; i<1; i++ ){
    var cellid=  Math.floor(Math.random()*Math.floor(99));
    if(cellid<10){
      cellid="0"+cellid
    }
    cellid="cell"+cellid;
    var personnage2=document.getElementById(cellid);
    personnage2.setAttribute("id","personnage2"); 
 
  }
 
  //mise en place des 4 armes
  function armes(){
    for(var i=0; i<4; i++ ){ 
      switch(i){
        case 0 :  var cellid=  Math.floor(Math.random()*Math.floor(99));
        if(cellid<10){
          cellid="0"+cellid
        }
        cellid="cell"+cellid;
        var arme1=document.getElementById(cellid);
        arme1.classList.add("arme1");
        break;
        case 1 :  var cellid=  Math.floor(Math.random()*Math.floor(99));
        if(cellid<10){
          cellid="0"+cellid
        }
        cellid="cell"+cellid;
        var arme2=document.getElementById(cellid);
        arme2.classList.add("arme2");
        break;
        case 2:  var cellid=  Math.floor(Math.random()*Math.floor(99));
        if(cellid<10){
          cellid="0"+cellid
        }
        cellid="cell"+cellid;
        var arme3=document.getElementById(cellid);
        arme3.classList.add("arme3");
        break;
        case 3 :  var cellid=  Math.floor(Math.random()*Math.floor(99));
        if(cellid<10){
          cellid="0"+cellid
        }
        cellid="cell"+cellid;
        var arme4=document.getElementById(cellid);
        arme4.classList.add("arme4")
        break;
 
      }
    }
  }
  armes();

26/01/2020, 17h00
javatwister

Salut,

à clarifier encore!
Tu utilises x fois une variable que tu nommes cellid, qui désigne des réalités différentes, qui génère des id numériques...; et tu appelles getElementById() sur des éléments ne faisant pas partie du DOM;

Code amélioré : https://codepen.io/jreaux62/pen/eYmXaOx

Code:

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
"use strict";
// ----------------
// mise en place de la map
const body = document.getElementsByTagName("body")[0];
const tbl = document.createElement("table");
const tblBody = document.createElement("tbody");
// cases occupees (pour éviter de mettre 2 éléments sur la m^me case)
let cases_occupees = [];
// ----------------
function grille(){
 
  for (let i = 0; i < 10; i++) {
    let row = document.createElement("tr");
    for (let j = 0; j < 10; j++) {
      var cell = document.createElement("td");
      cell.setAttribute('id',"cell"+ i + j );
      //console.log(cell);
      row.appendChild(cell);
    }
    tblBody.appendChild(row);
  }
 
  tbl.setAttribute("id", "tableau");
  tbl.setAttribute("width", "600px");
  tbl.setAttribute("height", "600px");
  tbl.setAttribute("border","1");
 
  tbl.appendChild(tblBody);
  body.appendChild(tbl);
}
// ----------------
// cell_id aléatoire
function get_random_id(){
  var id = Math.floor(Math.random()*Math.floor(99));
  if(id<10){ id="0"+id }
  while( cases_occupees.includes(id) ){
    id = get_random_id();
  }
  return id;
}
// ----------------
// mise en place des case bloquer 
function caseNoir(){
  for(var i=0; i<15; i++ ){  
    var cellid = get_random_id();
    var cell=document.getElementById("cell"+cellid);
    cell.classList.add("caseBloquer");
  }
}
// ----------------
// mise en place des joueur 
function joueurs(){
  var id, joueur;
  // -------
  // joueur1
  id = get_random_id();
  joueur = document.getElementById("cell"+id);
  joueur.setAttribute("id","personnage1"); 
  cases_occupees.push(id);
  // -------
  // joueur2 
  id = get_random_id();
  joueur = document.getElementById("cell"+id);
  joueur.setAttribute("id","personnage2"); 
  cases_occupees.push(id);
}
// ----------------
//mise en place des 4 armes
function armes(){
  var id, arme;
  for(var i=0; i<4; i++ ){
    id = get_random_id();
    arme = document.getElementById("cell"+id);
    arme.classList.add("arme1"+(i+1));
    cases_occupees.push(id);
  }
}
// ----------------
window.onload = function(){
  grille();
  joueurs();
  caseNoir();
  armes();
}
// ----------------

Concernant la récupération de l'id de la case de chaque personnage :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ----------------
// Récupérer le cell_id du joueur (après déplacement)
function get_joueur_cellid(class_joueur){
  let id = '';
  let cells = document.querySelectorAll("#tableau tbody tr td");
  for( var cell of cells ){
    if( cell.classList.contains(class_joueur) )
    {
      id = cell.id;
    }
  }
  return id;
}
// ----------------
console.log( get_joueur_cellid('personnage1') );
console.log( get_joueur_cellid('personnage2') );

26/01/2020, 19h00
javatwister

Ah ben oui, là je comprends tout mieux 8-)