JavaScript conditional statements
Conditional statements are used to perform different actions based on different conditions.
Conditional statements
Usually when writing code, you always need to perform different actions for different decisions. You can use conditional statements in your code to accomplish this task.
In JavaScript, we can use the following conditional statements:
if statement - Use this statement only when the specified condition is true. Execute code
if...else statement - Execute code when the condition is true, execute other code when the condition is false
if...else if....else statement - Use this statement to select one of multiple blocks of code to execute
switch statement - Use this statement to select one of multiple blocks of code to execute
If statement
Only if the specified condition is true , the statement will execute the code.
Syntax
{
Code executed when the condition is true
}
Please use lowercase if. Using uppercase letters (IF) will generate a JavaScript error!
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
If...else statement
Please use the if....else statement to execute code when the condition is true, and to execute other code when the condition is false.
Syntax
{
Code executed when the condition is true
}
else
{
Code executed when the condition is not true
}
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
else{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
If...else if...else statement
Use the if....else if...else statement to select one of multiple blocks of code to execute .
Syntax
{
Code executed when condition 1 is true
}
else if (condition2)
{
Code executed when condition 2 is true
}
else
{
Code executed when neither condition 1 nor condition 2 is true
}
Example
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>
<p>
这个例子演示了 if..else if...else 语句。
</p>
</body>
</html>Run instance»
Click the "Run instance" button to view online instances
More instances
Random Link
This example demonstrates a link that will take you to different places when you click on the link. Each chance is a 50% probability.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5){
x.innerHTML="<a href='http://w3cschool.cc'>Visit w3cschool</a>";
}
else{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
