目的
以下のようなマス目を、出た目に応じて赤く点灯させる。
| 1 | 2 | 3 | 4 | 5 |
|---|
１列全て点灯した時点でビンゴとする。
そのため、特定のマス目が点灯していることを判別したい。
(1) マス目の要素を取得する
app.js
const boxNumbers = document.getElementsByName('box')
各マス目のname属性から複数の要素を配列として取得する。
(2) これを赤く点灯させる
app.js
boxNumbers[sheetNumbersIndex].setAttribute("style", "background-color:#ff0000;")
style属性に、赤色の背景色という値を追加
(3) 当該マス目でイベント発火が生じているか判別
点灯前と点灯後の違いをコンソールで調査する
console.log(boxNumbers[0].style)
点灯前
CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
点灯後
CSSStyleDeclaration {0: "background-color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
どうやら、boxNumbers[0].styleの中身を見ると、点灯後は、キー０、値"background-color"という要素が追加されるらしい。
結論
というわけで、boxNumbers[0].style[0]の存在の有無で判別できました。
app.js
if(boxNumbers[0].style[0])
//点灯前はfalse,点灯後はtrueが返る