準備 前回書いたHTMLを準備しよう <p id="p1">おはよう</p> <input id="button1" type="button" value="ボタンを押して下さい"> <script> let button1=document.getElementById("button1"); let p1 = document.getElementById("p1"); button1.onclick = function(){ let uranai = "超吉です"; p1.innerHTML = uranai; } </script> p1を【おはよう】に button の言葉を【ボタンを教え下さい】に変えてあります。 他もちょっと変わっている。 これを使って、条件分岐というのを使ってみましょう。
条件分岐 ちょっとお遊び ボタンが押されるたびに <p id="p1">おはよう</p> <input id="button1" type="button" value="4,ボタンを押して下さい"> <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> おはよう
if分と条件分岐 ifなんてのが出てきました、 if(p1.innerHTML=="おはよう"){ もし、p1の内部文章がこんにちは!だったら{}の中を実行しなさいというわけです。 =は代入ですが ==(ダブルイコール)は、同じかどうかの判別式で、同じだったらといういみです。。 !=(ノットイコール)は、同じでなかったら、 <= とか、< とか、 >= とか、 >とか、判別式には色々あります。 さらに次のelse,そうでないときは、次のかっこの中を実行しなさいというわけです。 if(条件式1){ //これが本当なら //これをする }else{ //そうでなければ //これをする } これを組み合わせると、おはよう→こんにちは→こんばんは という風に変えることも出来ます。 どうするか考えて見え下さい。 if文はプログラムではよく使います。 ここに資料があります一つわざと反応しないのがあります、余裕があれば直しましょう。 b1.zip へのリンク こんにちはも入れたいですね。