ジャバスクリプトの１

スクリプトでアラートを出す
イベントハンドラー

準備

前回書いたHTMLを準備しよう

    <p id="p1">おはよう</p>
   <input id="button1" type="button" value="４，ボタンを押して下さい">
    <script>
        let button1=document.getElementById("button1");
        button1.onclick = function(){
            let p1 = document.getElementById("p1");
            if( p1.innerHTML=="おはよう"){
                p1.innerHTML = "こんばんは";
                p1.style.color = "red";
                p1.style.backgroundColor = "yellow";
            }else{
                p1.innerHTML = "おはよう";
                p1.style.color = "blue";
                p1.style.backgroundColor = "red";
            }
       }
    </script>

2つ以上条件分岐があるとき

前回の条件分岐は

    if(条件式１){ 
            //正しいとき実行する式
    }else{     
            //層でないとき十国刷る史記
    }
でしたが、条件が重なるときは

    if(条式１){ 
            //１が正しいとき実行する式
    }else{     
            if(条式２){ 
                    //２が正しいとき実行する式
            }else{ 
                    //その他の場合
            }
    }
とかけます。

もっと簡単に

これをもっと簡単に

    if ( 条式１ ){ 
            //１が正しいとき実行する式
    }else if ( 条件式２ ){     
            //２が正しいとき実行する式
    }else { 
            //その他の場合
    }
と書けます。

実際に書いてみよう

おはよう　→　こんにちは　→　こんばんは　とかわるようにしてみましょう。

    <p id="p1">おはよう</p>
   <input id="button1" type="button" value="４，ボタンを押して下さい">
    <script>
        let button1=document.getElementById("button1");
        let p1 = document.getElementById("p1");
        button1.onclick = function(){
            if( p1.innerHTML=="おはよう"){
                p1.innerHTML = "こんにちは";
                p1.style.color = "red";
                p1.style.backgroundColor = "yellow"
            }else if(p1.innerHTML=="こんにちは" ){
                p1.innerHTML = "こんばんは";
                p1.style.color = "blue";
                p1.style.backgroundColor = "red";
            }else{
                p1.innerHTML = "おはよう";
                p1.style.color = "white";
                p1.style.backgroundColor = "black";
            }
       }
    </script>

おはよう



次の問題へ進む