javascriptでsetAttributeメソッドが発動しているか判定する

目的

　以下のようなマス目を、出た目に応じて赤く点灯させる。

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が返る