JavaScript - サイコロの目を動かしたい

Question

###概要

htmlにtableで表を作り、そこに1~9の座標（id）を指定しています。
（例：サイコロの目１ => 座標5, サイコロの目2 => 座標1,9）

JavaScriptで要素を取得し、
該当idのtextContentに"●"を入れる事でサイコロを表現しています。

ボタンを押した時に、ランダムで持続的に変化するようにしたいのですが、
上手くできずに困っています。

####実現したい事
スタートボタンを押した時に、ランダムにマス目が変化するようにしたいです。

####試した事
squareの座標に"●"を代入し、それを配列に入れて、setIntertvalで動かす。

####エラーコード
SyntaxError: Invalid destructuring assignment target
エラーメッセージを調べると、分割代入と出てきました。
恥ずかしながら、初めて聞いた言葉で理解が乏しいです。
この辺りは自分で調べるつもりですが、もっとシンプルなロジックや、別の方法を知りたいです。

上手くできずに行き詰まってしまったため、質問させて頂きました。
よろしくお願い致します。

###ソースコード

<table>   
  <tr>
    <td name="square" id=1></td>
    <td name="square" id=2></td>
    <td name="square" id=3></td>
  </tr>
  <tr>
    <td name="square" id=4></td>
    <td name="square" id=5></td>
    <td name="square" id=6></td>
  </tr>
  <tr>
    <td name="square" id=7></td>
    <td name="square" id=8></td>
    <td name="square" id=9></td>
  </tr>
</table>

<button id="startEye">START</button> 

const square = document.getElementsByName("square");

  function rollEye() {
	const eyes = [square[4].textContent = "●"],[square[0].textContent = "●",square[8].textContent = "●"];
    timeId = setInterval(() => {
      number = Math.floor(Math.random() * 2);
      eyes[number];
    }, 10);
  }

  startEye.addEventListener("click", () => {
    if (!timeId) {
      rollEye();
    }
  });

Comments

[x_x]

td 要素には name 属性がないのでつくりを見直してください。
https://developer.mozilla.org/ja/docs/Web/API/Element/name

[asameshi]

そうだったんですね！見直します、ありがとうございます。

Answer 1

こんにちは

自己解決されたようですが、

もっとシンプルなロジックや、別の方法を知りたいです。

とのことでしたので、作ってみました。
シンプルになったかは分かりませんが、以下になります。

• https://codepen.io/jun68ykt/pen/eYYmXjo?editors=1010

考え方としては、 たとえば 4 という出目を、以下のような３行のテキスト

101
000
101

で表し、このテキストの行を連結して、数値の 1 と 0 の配列
[1, 0, 1, 0, 0, 0, 1, 0, 1]
を得ておき、テーブルに表示するときに<td> の配列をループで回して、ループインデクスの位置の、上記の出目の配列の要素が 1 ならば●を、 0 ならば空文字列を <td> のテキストに設定します。

以上、参考になれば幸いです。

Comments

[asameshi]

コードと解説、ご丁寧にありがとうございます。
０と1で判断する方法もあるのですね！勉強させて頂きます。

[jun68ykt]

どういたしまして。参考にして頂ければ幸いです。

Answer 2

とりあえず目標とする動きを実装できました。

const eyes = {
  1: [4],
  2: [0,8],
  3: [2,4,6],
  4: [0,2,6,8],
  5: [0,2,4,6,8],
  6: [0,1,2,6,7,8],
  7: [0,1,2,4,6,7,8],
  8: [0,1,2,3,5,6,7,8],
  9: [0,1,2,3,4,5,6,7,8]
};

function rollEye() {
  timeId = setInterval(() => {
    for (let i=0; i <= 8;i++){
      square[i].innerHTML = " ";
    }
    randomNum = Math.floor(Math.random() * Object.keys(eyes).length + 1)
    eyes[randomNum].forEach((value) => {
      square[value].innerHTML = "●";
     })
   }, 10);
}