javascript idに連番を振りたいです。

javascriptでオセロのプログラムを作成しています。
全てのtdにidを振りたいのですがうまくいきません。
console.logで確認したのですが、どこのセルを押しても「ｐ77」のidになってしまいます。

ｐ00、ｐ01、ｐ02....ｐ77となるようにしたいです。
ご教授よろしくお願いいたします。

該当のソースコード

javascript

var board=document.getElementById("board");
  var td=board.getElementsByTagName('td');
    for(var x=0;x<8;x++){
     for (var y=0;y<8;y++) {
      for (var i=0;i< td.length; i++) {
       td[i].id="p"+x+y;
      }
     }
    }

HTML

<table id="board">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
<!--省略-->
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

console.logで確認したのですが、どこのセルを押しても「ｐ77」のidになってしまいます。

xとyのループが、tdの位置と無関係にまわり続けているのでそうなります。

位置を割り算して決めてしまうほうがいい気もします。

javascript
1var board=document.getElementById("board");
2var td=board.getElementsByTagName('td');
3for (var i=0;i< td.length; i++) {
4   var x = Math.floor(i / 8);
5   var y = i % 8;
6   td[i].id="p"+x+y;
7}

投稿2021/03/12 04:27

maisumakun

総合スコア145975

aaaa-08

2021/03/12 08:41

ありがとうございました。違うやり方で解決しましたが、他のやり方があると知り勉強になりました。

行動規範の内容に同意します

既に<table>があるわけですから、td要素を順番に走査するのが妥当かと思います。

※以下、未検証なので参考コードとして、エラーがあれば、自前で修正下さい。
https://uhyohyo.net/javascript/2_8.html

JavaScript
1const rows = document.getElementById("board").tBodies[0].rows;
2
3for (var y=0, yl=rows.length;y<yl;y++){
4  const cells = rows[y].cells;
5
6  for (var x=0, xl=rows.length;x<xl;x++){
7    cells[x].id="p"+x+y;
8  }
9}