ワシ流プログラミング学習８（タイマー,ポイントカウンター実装）

• どちらをタップしても、「お題」は変わる。（最初だけはタイマーが指導する）
• 「正解」をタップした時だけ、画面下中央のポイントカウンターが＋１される。

<div class=main>
　　<p id=”text”>お題</p>
　　<button type=”button” id=”correct” class=”next”> 正解</button>
　　<button type=”button” id=”pass” class=”next”>開始/パス</button>
　　<p id=”point” class=”next”>0</p>
　　<p id=”default”>01:00</p>
</div>

const words = [“サル”,”キリン”,”ライオン”,”ゾウ”,”ウシ”,”ゴリラ”,”ウサギ”,”ラッコ”,”ワニ”,”パンダ”,”ネコ”,”カエル”,”イヌ”,”クマ”,”タヌキ”,”ブタ”,”ペンギン”,”バッタ”,”ヘビ”,”ウマ”,”キツネ”,”チョウ”,”ニワトリ”,”カタツムリ”,”アザラシ”,”カンガルー”,”イカ”,”カブトムシ”,”コアラ”,”タコ”,”クジラ”,”ネズミ”,”カマキリ”,”ザリガニ”,”サメ”,”カニ”,”クワガタ”,”ムササビ”,”クラゲ”,”カメ”,”ヤギ”,”シマウマ”,”カバ”,”ヒツジ”,”サイ”,”シカ”,”イノシシ”,”アライグマ”,”リス”,”ラクダ”];

var a = words.length;
while (a) {
var j = Math.floor( Math.random() * a );
var t = words[–a];
words[a] = words[j];
words[j] = t;
}

var text = document.getElementById(“text”);
var next = document.getElementsByClassName(“next”);
var nexts = Array.from(next);
nexts.forEach(function(change){
change.addEventListener(“click”,() => {
text.textContent = words[a];
count_start();
a++;
})
});

var p=1;
document.getElementById(“correct”)?.addEventListener(“click”, () => {
point.textContent = p;
p++;
});

var count = 60;var min = 0;
var sec = 0;
var start_f = false;
var interval;

function count_start(){
if (start_f === false) {
interval = setInterval(count_down,1000);
start_f = true;
}
}

function count_down(){
if(count === 1){
var display = document.getElementById(“default”);
display.style.color = ‘red’;
display.innerHTML = “TIME UP!”;
clearInterval(interval);
} else {
count–;
min = Math.floor(count / 60);
sec = count % 60;
var count_down=document.getElementById(“default”);
count_down.innerHTML = (“0″+min) +”：” + (“0″+sec).slice(-2);
}
}

const restart = document.getElementById(“restart”);

document.getElementById(“restart”)?.addEventListener(“click”, () =>
{window.location.reload();
});

　HTMLで、「正解」「パス」の両方を”next”というclass属性にして、javasctiptでは、それらをクリックした時に「お題」を変えるプログラムになっています。ワシが分かっていなかったのは、複数につけたclassは、配列として呼び出されるので、forEachを使って全てを順番に処理してあげないといけないということなのでした（用語の使い方が違っていたら、どなたかお教えください。）でもって、正解の方にだけつけた”correct”というidには、「クリックした時にカウントを＋１する」という処理を与えているのです。分かる方は、もうお気づきですね。そうです。「パス」につけたid(“pass)”って、全く意味をなしていませんね。。。今気づきました。

　しかも、様々なサイトで勉強してやっとgetElementsByClassNameの使い方が分かっても、その後2週間は、全く反応してくれない・・・いや、それどころか、今まで反応していた部分まで無反応になってしまっていました。２学期の終業式の日、子どもらが冬休みの達成目標を宣言した時の担任の目標は、もちろん『お題提示アプリに、得点カウンタをつける！』でした。かくして、冬休み1日目、気合を入れて一つ一つのコードをチェックして判明したその原因とは。。。

getElementByClassNameと書いてしまっていたからでした！