JavaScript if...else
ตัวอย่าง
หากชั่วโมงน้อยกว่า 20 ให้แสดง "Good day":
let hour = new Date().getHours();
if (hour < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
ผลลัพธ์ "Good day" หรือ "Good night":
let hour = new Date().getHours();
if (hour < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คำสั่ง if/else รันบล็อกของโค้ดหากเงื่อนไขที่ระบุเป็นจริง หากเงื่อนไขเป็นเท็จ สามารถดำเนินการบล็อกโค้ดอื่นได้
คำสั่ง if/else เป็นส่วนหนึ่งของคำสั่ง "Conditional" ของ JavaScript ซึ่งใช้เพื่อดำเนินการต่างๆ ตามเงื่อนไขที่แตกต่างกัน
ใน JavaScript เรามีคำสั่งแบบมีเงื่อนไขดังต่อไปนี้:
- ใช้ifเพื่อระบุบล็อกของโค้ดที่จะดำเนินการ หากเงื่อนไขที่ระบุเป็นจริง
- ใช้elseเพื่อระบุกลุ่มของโค้ดที่จะดำเนินการ หากเงื่อนไขเดียวกันเป็นเท็จ
- ใช้else ifเพื่อระบุเงื่อนไขใหม่ที่จะทดสอบ หากเงื่อนไขแรกเป็นเท็จ
- ใช้สวิตช์เพื่อเลือกหนึ่งในหลาย ๆ บล็อกของรหัสที่จะดำเนินการ
ไวยากรณ์
คำ สั่ง ifระบุกลุ่มของรหัสที่จะดำเนินการหากเงื่อนไขเป็นจริง:
if (condition) {
// block of code to be executed if the condition is true
}
คำ สั่ง elseระบุกลุ่มของโค้ดที่จะดำเนินการหากเงื่อนไขเป็นเท็จ:
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ระบุเงื่อนไขใหม่หากเงื่อนไขแรกเป็นเท็จ:
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> แรกในเอกสารมีรหัส "myDIV" ให้เปลี่ยนขนาดแบบอักษร:
var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {
x.style.fontSize = "30px";
}
เปลี่ยนค่าของแอตทริบิวต์ต้นทาง (src) ขององค์ประกอบ <img> หากผู้ใช้คลิกที่รูปภาพ:
<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 Statements
บทช่วยสอน JavaScript: คำสั่งสวิตช์ JavaScript
รองรับเบราว์เซอร์
if...elseเป็นคุณลักษณะ ECMAScript1 (ES1)
ES1 (JavaScript 1997) ได้รับการสนับสนุนอย่างสมบูรณ์ในเบราว์เซอร์ทั้งหมด:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |