JavaScriptについて

質問

JavaScriptでボタンゲームを作っているのですが、ボタンを押して正解だった場合、色が変わり押せなくなるようにしたいのですが、うまくいきません。どうしたら良いか困っています。
原因として「順番が正しいかどうか判定する」ところじゃないかと思います。

<script type="text/javascript">
//初期処理

var suji = "(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)(11)(12)(13)(14)(15)";
var pushed = ""; // 押されたボタン管理
var startTime; // ゲーム開始時間を管理
var labelArray = suji.split(""); // 数字を一文字ずつ分割
$("startButton").onclick = start;
nextGame(); // スタートボタンを表示する

// 開始準備
function nextGame() {
$("buttons").innerHTML = "";
$("startButton").style.visibility = "visible";
}

// ゲーム開始
function start() {

$("startButton").style.visibility = "hidden";

// 配列に数字を代入して順番をシャッフル
arrayShuffle(labelArray);

// ボタンを作る
for (var i = 0; i < labelArray.length; i++) {
var b = document.createElement("button");
b.innerHTML = labelArray[i];
b.onclick = button_clickHandler;
$("buttons").appendChild(b);
}
pushed = 0;
startTime = (new Date()).getTime();
}

// ボタンが押された時の処理
function button_clickHandler(e) {
var ch = e.target.innerHTML; // 押されたボタンの文字

// 順番が正しいかどうか判定する
if (suji.substr(pushed, 1) != ch) {
alert("違います。次は、" + suji.substr(pushed,1));
} else {
$("buttons").innerHTML="";
arrayShuffle(labelArray)
for(var i = 0; i < labelArray.length; i++) {
var b = document.createElement("button");
b.innerHTML = labelArray[i];
b.onclick = button_clickHandler;
$("buttons").appendChild(b);

}
e.target.disabled = true;
e.target.style.backgroundColor = "#909090";
pushed++;
}
if (pushed == labelArray.length) {
var now = new Date().getTime();
var tm = Math.floor((now - startTime) / 1000);
var min = Math.floor(tm % 3600 / 60);
var sec = tm % 60;
alert("おめでとうございます。\n"+ min + "分" + sec +"秒でクリアです！");
nextGame();
}
}

// 配列をシャッフルする
function arrayShuffle(bs) {
for (var i = 0; i < bs.length; i++) {
var r = Math.floor(Math.random()*bs.length);
var tmp = bs[i];
bs[i] = bs[r];
bs[r] = tmp;
}
}
function $(id) { return document.getElementById(id); }
</script>

回答No.1

q-ue

確かに、「順番が正しいかどうか判定する」の部分に問題があります。

$("buttons").innerHTML="";
としているので、
e.target.parentNodeがnullになっています。
そのため、
e.target.disabled = true;
e.target.style.backgroundColor = "#909090";
が無効になります。

for(var i = 0; i < labelArray.length; i++) {
var b = document.createElement("button");
b.innerHTML = labelArray[i];
b.onclick = button_clickHandler;
$("buttons").appendChild(b);
}
の中で、labelArray[i]が選択されたものか判断して disabled の設定をすればいいと思います。()が重複するので、そこは工夫が必要です。