ジャバスクリプトの1

数字を作って占いをする

準備

HTMLを準備しよう
br> 前回作ってある続きからです。
作る数は ×5 と5をかけて、0から5の整数になっています。
pタグの言葉を、今日の運勢としました。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<body>
<div>
  <h1>占いを作る</h1>
  <div>
    <p id="p1">今日の運勢</p>
   <input id="button1" type="button" value="4,ボタンを押して下さい">
    <script>
        let button1=document.getElementById("button1");
        let p1 = document.getElementById("p1");
        button1.onclick = function(){
            let rnd = Math.random()*5;
            rnd = Math.floor(rnd);
            p1.innerHTML=rnd;
       }
    </script>  
  </div>
</div>
</body>
</html> 

数を文字に変える

このままでは、数が表示されて占いの結果が予示されません。
数字によって文字を表示したい。
そんなときは、if文で条件分岐したらどうでしょう。(一つ目の方法)
 if ( 条件式1){
    1が真なら、これを実行してif文から出る 
 } else if ( 条件式2 ){    
    2が真ならこれを実行してif文から出る
 }else{
    それ以外はこれを実行してif文終了
 }
これを使ってみましょう。

条件分岐を書いてみよう

ここを書き換えます。

        button1.onclick = function(){
            let rnd = Math.random()*5;
            rnd = Math.floor(rnd);
            p1.innerHTML=rnd;
       }
 
こんなふうになります,

        button1.onclick = function(){
//            let rnd = Math.random()*5;
//            rnd= Math.floor(rnd);
            let rnd = Math.floor( Math.random()*5 ); //上の2行を1行にしちゃった
            if(rnd==0){
                p1.innerHTML="大吉";
            }else if(rnd==1){
                p1.innerHTML="中吉";
            }else if(rnd==1){
                p1.innerHTML="吉";
            }else if(rnd==1){
                p1.innerHTML="小吉";
            }else{
                p1.innerHTML="小吉";
            }
        }
 


ボタンを押して、占いが変われば大丈夫です。
途中、2行を1行にしてみました。
次は、配列を使ってもうちょっとプログラムをかっこよくしよう。

条件分岐を書いてみよう

ここを書き換えます。

        button1.onclick = function(){
            let rnd = Math.random()*5;
            rnd = Math.floor(rnd);
            p1.innerHTML=rnd;
       }
 
こんなふうになります,

        button1.onclick = function(){
//            let rnd = Math.random()*5;
//            rnd= Math.floor(rnd);
            let rnd = Math.floor( Math.random()*5 ); //上の2行を1行にしちゃった
            if(rnd==0){
                p1.innerHTML="大吉";
            }else if(rnd==1){
                p1.innerHTML="中吉";
            }else if(rnd==1){
                p1.innerHTML="吉";
            }else if(rnd==1){
                p1.innerHTML="小吉";
            }else{
                p1.innerHTML="小吉";
            }
        }
 

今日の運勢1



ボタンを押して、占いが変われば大丈夫です。
途中、2行を1行にしてみました。
次は、配列を使ってもうちょっとプログラムをかっこよくしよう。

elseを使わなくても

これだけだったら if else を使わなくても出来そうだ。
それにこの方が藩王が良いみたい。

     <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>  
どんな書き方でも良いけれど、もう一つ、if文を使わない方法、配列について次で学習しよう。