2008年10月31日

トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐

スポンサード リンク

ボタンを押すとボタンのラベルと画像が入れ替わります。
キーを押すたびに二つの状態が入れ替わるトグルボタン。

image

サンプルソース

<html>
<head>
<title>トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐</title>
<script language="JavaScript">
<!--
flag = false;
num = 0;
function toggle(){
flag = !flag; // trueとfalseの切り替え ! 否定演算子
document.getElementById("botan").value = flag; // ボタンのラベルの変更
if(flag == true){ alert(flag); } //条件を満たした場合の処理
else{  alert(flag); } //条件を満たしていない場合の処理}
}
function toggle01(){
num ^= 1; // 0と1の切り替え ^ 排他的論理和
document.getElementById("botan01").value = num;
if(num == 1){ alert(num); } //条件を満たした場合の処理
else{ alert(num); } //条件を満たしていない場合の処理
}

// -->
</script>
</head>
<body>
<p>キーを押すたびに二つの状態が入れ替わるトグルスイッチ。</p>
<input type="button" id="botan" value="トグルスイッチ true と false" onclick="toggle()" style="width : 150px;">
<input type="button" id="botan01" value="トグルスイッチ 0 と 1" onclick="toggle01()" style="width : 150px;">
</body>
</html>
上記のサンプルの他にも次のような書き方もあります。
if文
 if(flag == 0){ // 条件文
      flag = 1; // 条件が真ならここを実行そうでなければ
    }else{   // else 以降を実行
      flag = 0;
    }


条件演算子
 (flag == false)?flag = true: flag = false;
		条件が真なら1つ目の文、偽なら2つ目の文を実行する
posted by javaScript at 16:43 | 大阪 ☁ | Javascript 構文 関数 ステートメント | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。