準備 HTMLを準備しよう br> 前回作ってある続きからです。 <p id="p1">今日の運勢1</p> <input id="button1" type="button" value="ボタンを押して下さい"> <script> let button1=document.getElementById("button1"); let p1 = document.getElementById("p1"); button1.onclick = function(){ let rnd = Math.floor( Math.random()*5 ); let uranai="大吉"; if(rnd == 0 ){ uranai="大吉"} if(rnd == 1 ){ uranai="中吉"} if(rnd == 2 ){ uranai="吉"} if(rnd == 3 ){ uranai="小吉"} if(rnd == 4 ){ uranai="凶"} p1.innerHTML= uranai ; } </script>
配列を使えば基すっきり 反応もはやいかも これまで、文字の入れ物として ver を使ってきました。 これには、1つだけ入る入れ方があります。 ver moji = "大吉"; これは文字を一つだけ入れる方法。 箱の中に、一つ文字などを入れられる。 でも名前をいくつもつけるのは面倒だ。 そこで、 let moji = ["大吉","中吉","吉","小吉","凶"]; これで配列が出来ます。同じ名前で、中が分かれている。 一つ一つを呼び出すには,番号を指定します。 moji(0) は 大吉 moji(1) は 大吉 moji(2) は 大吉 moji(3) は 大吉 moji(4) は 大吉 ということになります。 0から4までの5つです。乱数発生のとき0から数字を作ったのは、配列の呼び出しにぴったりで、ここへ来て役に立つのです。プログラムの1番目の数は0とする方が都合が良いのです。
配列を使ってプログラムを書き直すと <p id="p1">今日の運勢1</p> <input id="button1" type="button" value="ボタンを押して下さい"> <script> let button1=document.getElementById("button1"); let p1 = document.getElementById("p1"); let uranai = ["大吉","中吉","吉","小吉","凶"]; button1.onclick = function(){ let rnd = Math.floor( Math.random()*5 ); p1.innerHTML= uranai[rnd] ; } </script> 今日の運勢1 こんなふうになります, ずいぶん簡単になりましたし、いちいちif文を呼び出さないので反応も早いと思います。