JavaScript if ... else
例
時間が20未満の場合は、「Goodday」を出力します。
let hour = new Date().getHours();
if (hour < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
「Goodday」または「Goodevening」を出力します。
let hour = new Date().getHours();
if (hour < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
以下のその他の例。
定義と使用法
if / elseステートメントは、指定された条件が真の場合にコードのブロックを実行します。条件がfalseの場合、別のコードブロックを実行できます。
if / elseステートメントは、JavaScriptの「条件付き」ステートメントの一部であり、さまざまな条件に基づいてさまざまなアクションを実行するために使用されます。
JavaScriptには、次の条件文があります。
- 指定された条件が真の場合、実行するコードのブロックを指定する場合はifを使用します
- 同じ条件がfalseの場合、elseを使用して実行するコードのブロックを指定します
- 最初の条件がfalseの場合、テストする新しい条件を指定するには、 elseifを使用します
- スイッチを使用して、実行するコードの多くのブロックの1つを選択します
構文
ifステートメントは、条件が真の場合に実行されるコードのブロックを指定します。
if (condition) {
// block of code to be executed if the condition is true
}
elseステートメントは、条件がfalseの場合に実行されるコードのブロックを指定します。
if (condition) {
// block of code to be executed if the condition is true
}
else {
// block of code to be executed if the condition is false
}
else ifステートメントは、最初の条件がfalseの場合に新しい条件を指定します。
if (condition1) {
// block of code to be executed if condition1 is true
}
else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
パラメータ値
| Parameter | Description |
|---|---|
| condition | Required. An expression that evaluates to true or false |
その他の例
時間が10:00未満の場合は「おはよう」の挨拶を作成し、そうでない場合は20:00未満の場合は「おはよう」の挨拶を作成し、それ以外の場合は「こんばんは」を作成します。
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
ドキュメントの最初の<div>要素のIDが「myDIV」の場合は、フォントサイズを変更します。
var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {
x.style.fontSize = "30px";
}
ユーザーが画像をクリックした場合は、<img>要素のソース属性（src）の値を変更します。
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
ユーザー入力に基づいてメッセージを表示します。
var letter = document.getElementById("myInput").value;
var text;
// If the letter is "c"
if (letter === "c") {
text = "Spot on! Good job!";
// If the letter is "b" or "d"
} else if (letter === "b" || letter === "d") {
text = "Close, but not close enough.";
// If the letter is anything else
} else {
text = "Waaay off..";
}
入力データを検証します。
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than 1 or greater than 10, output "input is not valid"
// If x is a number between 1 and 10, output "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
関連ページ
JavaScriptチュートリアル：JavaScript If ... Elseステートメント
JavaScriptチュートリアル：JavaScriptSwitchステートメント
ブラウザのサポート
if...else ECMAScript1（ES1）機能です。
ES1（JavaScript 1997）は、すべてのブラウザーで完全にサポートされています。
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |