w3resource

JavaScript: Conditional Operator

?: (Conditional operator)

The conditional operator is used as a shortcut for standard if statement. It takes three operands.

Syntax

Condition ? expr1: expr2

Parameters

condition : An expression that evaluates to true or false.

expr1, expr2 : Expressions with values of any types.

If the condition is true, the operator returns the value of expr1; otherwise, it returns the value of expr2.

For example

status = (marks >= 30) ? "Pass" : "Fail"

The statement assigns value "Pass" to the variable status if marks are 30 or more. Otherwise, it assigns the value of "Fail" to status.

Example:

In the following web document the conditional operator statement [status = (marks >= 30) ? "Pass" : "Fail"] assigns value "Pass" to the variable status if marks are 30 or more. Otherwise, it assigns the value of "Fail" to status.

HTML Code

<!doctype html><head>
<meta charset="utf-8">
<title>JavaScript conditional operator example with DOM</title>
<meta name="description" content="This document contains an example of JavaScript conditional operator with DOM" />
</head>
<form name="example" onsubmit="ViewOutput()">
<input type="text" id="marks" placeholder="Enter Marks" />
<input type="submit" value="Submit" />
</form>
<body>
<script src="javascript-conditional-operator-example1.js">
</script>
</body>
</html>

JS Code

function ViewOutput()
{
'use strict';
var marks = document.getElementById("marks").value;
var status1 = (marks >= 30) ? "Pass" : "Fail";
var newParagraph = document.createElement("p"); //creates a new paragraph element
var newText = document.createTextNode(status1); //creates text along with ouput to be displayed 
newParagraph.appendChild(newText); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph); // created paragraph and text along with output is appended to the document body
}

View the example in the browser

JavaScript: Conditional Operator and If else statement

The conditional operator statement of the above example
status = (marks >= 30) ? "Pass" : "Fail" is equivalent to the following statement.

if marks>=30
 document.write("Pass");
 else
 document.write("Fail");
 

See also

comma
delete
function
in
instanceof
new
this
typeof
void

Want to Test your JavaScript skill ?

Want to Practice JavaScript exercises ?

Previous: JavaScript: String Operators
Next: JavaScript: Comma Operator

Test your Programming skills with w3resource's quiz.



Share this Tutorial / Exercise on : Facebook and Twitter

JavaScript: Tips of the Day

Using the window.location object

JavaScript can access the current URL using the window.location object. Pretty neat, but even cooler is that this object contains certain parts of the URL as well.
Get access to the protocol/host/pathname/search/and more!

// JavaScript can access the current URL in parts. For this URL:
'https://thatsanegg.com/example/index.html?s=article'
window.location.protocol == 'https:'
window.location.host == 'thatsanegg.com'
window.location.pathname == '/example/index.html'
window.location.search == '?s=article'

Ref: https://bit.ly/2LBj213