if文による条件分岐 - JavaScript

JavaScriptで if文を使った条件判定処理のコードを紹介します。

書式

if (条件式){
}

または


if (条件式){
}
else{
}

または、

if (条件式1){
}
else if (条件式2){
}
...
else if (条件式n){
}

または、

if (条件式1){
}
else if (条件式2){
}
...
else if (条件式n){
}
else{
}

上記の書式が使えます。

コード例

次のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script language="javascript" type="text/javascript">
        function onButtonClick() {
            var val = document.forms.form1.textBox1.value;
            var target = document.getElementById("output");

            if (val == "Penguin") {
                target.innerHTML = "合っています。";
            } else {
                target.innerHTML = "間違っています。";
            }
        }
  </script>
</head>
<body>
  <form action="" id="form1">
    <div>"Penguin"と入力してください。</div>
    <input id="textBox1" type="text" value="" />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>
  <div id="output"></div>
</body>
</html>

解説

下記コードが[Exec]ボタンがクリックされたときに実行される関数になります。textBox1のテキストボックスに入力された値を読み取り、値が"Penguin"ならばidの値"output"のタグの部分に、「合っています」の文字を表示します。それ以外の場合は「間違っています」の文字を表示します。

  function onButtonClick() {
     var val = document.forms.form1.textBox1.value;
     var target = document.getElementById("output");

     if (val == "Penguin") {
         target.innerHTML = "合っています。";
     } else {
         target.innerHTML = "間違っています。";           
     }
  }

こちらがフォームのテキストボックスとボタンのコードです。ボタンがクリックされるとonButtonClick()関数を実行するよう記述します。

  <form action="" id="form1">
    <div>"Penguin"と入力してください。</div>
    <input id="textBox1" type="text" value="" />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>
  <div id="output"></div>