Câu điều kiện if/else trong JavaScript

Định nghĩa và cách sử dụng

Điều kiện if/else sẽ thực hiện khối mã nếu điều kiện được chỉ định là đúng. Nếu điều kiện là sai, có thể thực hiện một khối mã khác.

Điều kiện if/else là một phần của các câu điều kiện trong JavaScript, được sử dụng để thực hiện các thao tác khác nhau dựa trên các điều kiện khác nhau.

Trong JavaScript, chúng ta có các câu điều kiện sau:

  • Sử dụng if để xác định khối mã cần thực hiện nếu điều kiện đã xác định là đúng
  • Sử dụng else để xác định khối mã cần thực hiện nếu điều kiện đó là sai
  • Nếu điều kiện đầu tiên là sai, thì sử dụng else if để xác định điều kiện mới cần kiểm tra
  • Sử dụng switch để chọn một trong nhiều khối mã cần thực hiện

Mẫu

Nếu giờ hiện tại (HOUR) nhỏ hơn 20:00, thì trong phần tử có id="demo" sẽ hiển thị "Good day":

var time = new Date().getHours(); 
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}

thử trực tiếp xem

Có nhiều ví dụ TIY khác ở dưới trang.

Ngữ pháp

Điều kiện if xác định khối mã cần thực hiện khi điều kiện là đúng:

if (condition) {
  // khối mã cần thực hiện nếu điều kiện là true
}

Câu else chỉ định khối mã cần thực hiện khi điều kiện là giả:

if (condition) {
  // khối mã cần thực hiện nếu điều kiện là true
} else { 
  // khối mã cần thực hiện nếu điều kiện là false
}

Nếu điều kiện đầu tiên là giả, thì else if chỉ định một điều kiện mới:

if (condition1) {
  // khối mã cần thực hiện nếu condition1 là true
}
  // khối mã cần thực hiện nếu condition1 là false và condition2 là true
} else {
  // khối mã cần thực hiện nếu condition1 là false và condition2 là false
}

Giá trị tham số

Tham số Mô tả
condition Bắt buộc. Cụm từ biểu đạt có kết quả là true hoặc false.

Chi tiết kỹ thuật

Phiên bản JavaScript: ECMAScript 1

Các ví dụ khác

Mẫu

Nếu thời gian nhỏ hơn 20:00, thì tạo lời chào "Good day", nếu không thì tạo "Good evening":

var time = new Date().getHours(); 
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

thử trực tiếp xem

Mẫu

Nếu thời gian nhỏ hơn 10:00, tạo một lời chào "Good morning", nếu không nhưng thời gian nhỏ hơn 20:00, tạo một lời chào "Good day", nếu không thì tạo một lời chào "Good evening":

var time = new Date().getHours(); 
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

thử trực tiếp xem

Mẫu

Nếu id của phần tử div đầu tiên trong tài liệu là "myDIV", thì thay đổi kích thước font của nó:

var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {}} 
  x.style.fontSize = "30px";
}

thử trực tiếp xem

Mẫu

Khi người dùng nhấp vào hình ảnh, thay đổi giá trị thuộc tính nguồn (src) của thẻ <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>

thử trực tiếp xem

Mẫu

Hiển thị thông báo dựa trên đầu vào của người dùng:

var letter = document.getElementById("myInput").value;
var text;
// Nếu chữ cái là "c"
if (letter === "c") {
  text = "Spot on! Good job!";
// Nếu chữ cái là "b" hoặc "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// Nếu là các chữ cái khác
} else {
  text = "Waaay off..";
}

thử trực tiếp xem

Mẫu

Xác thực dữ liệu nhập vào:

var x, text;
// Lấy giá trị của trường nhập có id="numb"
x = document.getElementById("numb").value;
// Nếu x không phải là số hoặc nhỏ hơn 1 hoặc lớn hơn 10, thì xuất "input is not valid"
// Nếu x là số từ 1 đến 10, thì xuất "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

thử trực tiếp xem

trình duyệt hỗ trợ

câu Chrome IE Firefox Safari Opera
if/else Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Trang liên quan

Hướng dẫn JavaScript:Câu lệnh If...Else trong JavaScript

Hướng dẫn JavaScript:Câu lệnh Switch trong JavaScript