画像に対応するコメントの表示

JavaScriptで作る「5秒でキメろ！」 (全4回)を勉強しました。前回のJavaScriptで作るストップウォッチ (全7回)を勉強していたおかげで「これはひょっとしたら、まずStartとStopの差を計算。そのうえで5秒との差を計算して表示するのかもしれない」と、ある程度推測できました。やっほー！嬉しい！

#勉強開始
##光るテクニック
目から鱗だったのはdocument.getElementById('result');を毎回書くのは面倒だからと変数に格納させることで、以降をたった1文字で済ませられるところ。変数って便利だなと痛感しました。

##if文の可能性

if (diff == 0) {
	e.innerHTML = "ぴったし！すごい！";
} else if (diff > 0) {
	e.innerHTML = (diff / 1000) + "秒、速い！";
} else {
	e.innerHTML = (diff / 1000) + "秒、遅い！";
}

「条件と結果を変えるだけで、いろいろ遊べるよう気がする」なんて考えていたとき、ふと頭をよぎったのは、前々回のおみくじプログラムの改造でやろうとした「ランダムで生成される要素をおみくじとは別に、おみくじに対応するコメントも追加する」という機能はif文を使えば実現できるかもしれないということ。もしランダムで選ばれた画像がAだった場合、対応するAというコメントを表示させるという内容が書けるなら可能ではないだろうか。思い立ったら動かないと気が済まないので早速、別に書いてみました。

			var e = document.getElementById('resultText');

			if (resultImage == omikuji[0]) {
				e.innerHTML = "画像はAです";
			} else if (resultImage == omikuji[1]) {
				e.innerHTML = "画像はBです";
			} else {
				e.innerHTML = "画像はCです";
			}
		

あーでもない、こーでもないと格闘すること1時間。ついに、ついに成功しました！試行錯誤したおみくじプログラムの改造の続きで、なんとなく覚えていた配列のインデックスの指定の方法と前回覚えたif文を組み合わせたところ画像に対応したコメントの表示に成功したんです。生まれて初めて自分で考えて動いたプログラムに、しばらくの間、信じられず何回もリロードして送信ボタンを連打しました。今は興奮して心臓が凄い速さでバクバク動いています。技術的に当分は無理だと思っていた機能がこんなにも早く実現できて本当に嬉しいです。

#総評
か細いながらも知識と経験が合致して実現できました。もしかしたらsetTimeoutを使うと卵から出てくるタイミングに合わせてコメントも表示できるかもしれませんね。時間的に今日の勉強はここまで。とりあえず動くところを確かめたかったのでコメントはキャラ名だけですがリンクを張っておきます。

#リンク
未完成の占いプログラム Ver.2