Javascript

おみくじを作ろう2

箱をクリックしていくと一つだけ当たりが出るおみくじのようなゲームを作ってみます。

  • if文

if文

・では昨日の続きをしていきます。機能はランダムに出した0から4の整数値を定数に入れるところまでやりました。

おみくじを作ろう1

・今日はその定数がiだった場合に大吉と表示し、それ以外を小吉としてあげると言うような処理をすることによって5つある要素をクリックしたらどれか一つが大吉になるようにコードを書いていきます。

・こういった処理はif関数を使います。if関数はもしiが定数だったら次の処理をし、ハズレの場合はelseでつなげて次の処理をしていくというように書いていきます。今回の場合はif(i === lucky) {}で大吉の処理を書いていき、else {}で小吉の処理を書いていきます。

・あとは復習になりますがボックスの中で大吉!!と表示したいのでif(i === lucky) {}の{}の中にはtextContentで大吉!!と書きclass属性も付与したいのでclassListも付与していきましょう。 div.classList.add('great’);でいいでしょう。

CSSクラスの操作

100個のdiv要素を作る

・それ以外の場合はelse{}の中に書いていきます。小吉!と表示したいのでdiv.textContent = '小吉!’と書き、class属性も付与したいのでdiv.classList.add('good’);と書いておけばいいでしょう。

class属性の.great.goodは明日作っていきましょう。

-Javascript