条件を満たすDOM要素の取得方法

Question

やりたいこと

ビンゴゲームを作成しています。
ボタンを押すと、1〜９のいずれかの数字を選択し、そこで選択された数字がビンゴシート上で色が変わるようにしたいです。
※通常のビンゴに必要な諸々の機能はまだ実装していません。

解決したい問題

ボタンを押して選択された数字「selectedNum」と、ビンゴシートにある９マスのうちの、いずれかの「sheetNum」が一致する場合、そのマスのDOM要素を取得し、選択されたことがわかりやすいよう背景色をつけるためのクラスを付与したいのですが、特定の条件にあうDOM要素の取得方法、クラスの付与方法が思いつきません。アドバイスをお願いいたします。

import { useEffect, useState } from 'react'
import styled from 'styled-components'

function App() {
  const [drawedNum, setDrawedNum] = useState(' ')
  const [sheetNums, setSheetNums] = useState([1,2,3,4,5,6,7,8,9])
 
  const shuffle = ([...array]) => {
    for (let i = array.length - 1; i >= 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }
  
  // ビンゴシート作成
  // 1〜９の組み合わせて、マウントのたびに異なるシートを作成
  useEffect ( () => {
    setSheetNums(shuffle(sheetNums))
  }, [])

// くじ引き
// 1~9いずれかの数字をランダムで引く。
  var selectedNum;
  function selectNum () {
    const array = [1,2,3,4,5,6,7,8,9]
    selectedNum = array[Math.floor(Math.random() * 9)]
    setDrawedNum(selectedNum)
  }

  console.log(drawedNum)

  return (
    <>
      <Field>
        {
          sheetNums.map((sheetNum, index) => {
            return <div key={index}>{sheetNum}</div>
          })
        }
      </Field>
      <SelectedNum>選ばれた番号は{drawedNum}です</SelectedNum>
      <button onClick={selectNum}>くじ引きボタン</button>
    </>
  );
}

export default App;

const Field = styled.div`
  box-sizing: border-box;
  height: 270px;
  width: 270px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  div {
    box-sizing: border-box;
    border: 1px solid black;
    height: 90px;
    width: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 25px;
  } 
`
const SelectedNum = styled.div`
  width: 240px;
  height: 100px;
  border: solid 1px black;
  line-height: 100px;
  text-align: center;
`

Comments

[babu_babu_baboo]

<div data-key={index}>{sheetNum} class="mejirusi"</div>にして
getElementsByClassName / querySelectorAll で取得して、
.dataset.key で番号を取得してはどうですか？

[Taka009]

返信が遅れ申し訳ございません！
アドバイスありがとうございました。
早速この方法で試してみたいと思います。

[Taka009]

たびたびの質問ですみません。

9つあるdivにclassName、data-keyをつけて、querySelectorAllで取得しました。
そのNodeListの要素の1つからdataset.keyの値を取得しようとするとエラーが発生します。

エラー：TypeError: Cannot read property 'dataset' of undefined

NodeListはちゃんと取得できているようで、要素の1つをconsole.logで確認したところ、
コンソールには、このように表示されました。
一行目　undefined
二行目　<div data-key=0 class='square' >5</div>

二行目をみるとちゃんと取得できているようなのですが、一行目にundefinedとあるのが問題なのでしょうか？

````javascript
function App() {
const [drawedNum, setDrawedNum] = useState(' ')
const [sheetNums, setSheetNums] = useState([1,2,3,4,5,6,7,8,9])

const shuffle = ([...array]) => {
for (let i = array.length - 1; i >= 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

// ビンゴシート作成
// 1〜９の組み合わせて、マウントのたびに異なるシートを作成
useEffect ( () => {
setSheetNums(shuffle(sheetNums))
}, [])

//質問に該当する部分
const sheetList = document.querySelectorAll("div.square")
const sheetListItem = sheetList[3]
console.log(sheetListItem.dataset.key)

// くじ引き
// 1~9いずれかの数字をランダムで引く。
var selectedNum;
function selectNum () {
// くじで引いた番号
selectedNum = sheetNums[Math.floor(Math.random() * 9)]

setDrawedNum(selectedNum)
}

return (
<>
<Field>
{
sheetNums.map((sheetNum, index) => {
return <div key={index} data-key={index} className='square'>{sheetNum}</div>
})
}
</Field>
<SelectedNum>選ばれた番号は{drawedNum}です</SelectedNum>
<button onClick={selectNum}>くじ引きボタン</button>
</>
);
}

````

[babu_babu_baboo]

まず 素のJavascript で書きませんか？とても私には苦行です。

document.querySelectorAll("div.square")
この時に、親要素にもつけていたとか・・・
０番目のノードをconsole.log すればわかるのでは？

１つアドバイスですが、こういったものを作るときは、ビンゴゲームの内部的な処理と、出力するための処理を分離して制作します。
そうすれば、後からCANVASで描きたくなった時とか、SVGで描きたくなった時、出力される部分を書き換えるだけで応用できます。

あっ、ここは質問を再編集できたんだべ。

[Taka009]

ご親切に何度もありがとうございます！！

そうですね、javascriptも初心者にもかかわらず、使い慣れていないreactを使ってしまったため、質問が余計わかりにくいものになってしまいました。申し訳ございません！！
親要素にはclassはつけておらず、0番目のノードも思った通りのものになっているのを確認しました。

分離して制作するという考えも全く持っていませんでした。勉強になります。
その辺りもよく考えて、作り直してみます。
何度もありがとうございました！！

Answer 1

const
ary =[
 0,0,1,
 0,1,1,
 1,0,1
],

ptn = [
  [0,1,2], [3,4,5], [6,7,8],
  [0,3,6], [1,4,7], [2,5,8],
  [0,4,8], [2,4,6]
];


let bingo =
  ptn.reduce (
    (a, b, c)=>
      b.map (
        d=>
          ary[d]
      ).reduce (
        (a,b)=>
          a + b
      ) == 3
      ? [...a, c]
      : a
    , []);

console.log (bingo.length + " 箇所がビンゴ！")
console.log(bingo);

Comments

[Taka009]

何度もアドバイス、そしてご回答いただきありがとうございます！！
とても勉強になります????