== and ===  why is it working like this?

Camillia
Camillia used Ask the Experts™
on
I don't understand why I needed to use == instead of === in code below. When I use ===, code doesn't go down the correct if else block

<select class="form-control valid" id="ddlRoles" name="ddlRoles" aria-invalid="false">

						<option value="1">CSI STL - User</option>
						<option value="2">Ferguson - User</option>
						<option value="3">CSI Demo - User</option>
						<option value="4">Customer Admin - US/Canada</option>
						<option value="5">Customer Manager - US/Canada</option>
						<option value="6">Customer User - US/Canada</option>
						<option value="7">CSI AE - US/Canada</option>
					</select>

Open in new window


This works but if I change it === ... only else block gets executed

$('#ddlRoles').change(function() {    
		console.log($('#ddlRoles').val());

		if ($('#ddlRoles').val() == 3) {

			$("#camilladefault").hide();
			$("#camilladivtest").show();
			$("#camilladivtestFer").hide();
			}
		else if ($('#ddlRoles').val() == 2)
			{
				$("#camilladefault").hide();
				$("#camilladivtest").hide();
				$("#camilladivtestFer").show();
			}
		 else {
			$("#camilladefault").show();
			$("#camilladivtest").hide();
			$("#camilladivtestFer").hide();
		}
    });

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
because .val() returns a string, but === requires it to be a numeric to return true.
leakim971Multitechnician
Top Expert 2014
Commented:
2
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
The double == is the comparison operator and the triple === is the strict comparison operator. This means that the double simply checks if the values match, but the triple checks to make sure that the values AND the type match.

In your case, the val() returns a string with a value of 3, so using the double simply checks that the value of string 3 matches the value of numeric 3, which it does. If you use the strict comparison it will also check the types which don't match - one is string and one is numeric.
vogenSoftware Developer

Commented:
Here is to clarify difference between == and ===

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select class="form-control valid" id="ddlRoles" name="ddlRoles" aria-invalid="false">

						<option value="1">CSI STL - User</option>
						<option value="2">Ferguson - User</option>
						<option value="3">CSI Demo - User</option>
						<option value="4">Customer Admin - US/Canada</option>
						<option value="5">Customer Manager - US/Canada</option>
						<option value="6">Customer User - US/Canada</option>
						<option value="7">CSI AE - US/Canada</option>
					</select>
<script>
$('#ddlRoles').change(function() {    
	console.log($('#ddlRoles').val());
	var typer = typeof $('#ddlRoles').val();
	console.log("typeof \$('#ddlRoles').val() is " + typer);
	var num1 = 3;
	var num2 = "2";
	console.log("typeof num1 is " + typeof num1);
	console.log("typeof  num2 is " + typeof num2);

	if ($('#ddlRoles').val() == 3) {
		console.log("typeof \$('#ddlRoles').val() is " + typer + "==" + typeof 3);
		/*
		$("#camilladefault").hide();
		$("#camilladivtest").show();
		$("#camilladivtestFer").hide();
		*/
		console.log("#camilladefault = hide()");
		console.log("#camilladivtest = show()");
		console.log("#camilladivtestFer = hide()");

	}
	else if ($('#ddlRoles').val() == "2")
	{
		console.log("typeof \$('#ddlRoles').val() is " + typer + "==" + typeof "2");
		/*
		$("#camilladefault").hide();
		$("#camilladivtest").hide();
		$("#camilladivtestFer").show();
		*/
		console.log("#camilladefault = hide()");
		console.log("#camilladivtest = hide()");
		console.log("#camilladivtestFer = show()");
		}
		else {
		/*
		$("#camilladefault").show();
		$("#camilladivtest").hide();
		$("#camilladivtestFer").hide();
		*/
		console.log("#camilladefault = show()");
		console.log("#camilladivtest = hide()");
		console.log("#camilladivtestFer = hide()");
	}
 });
</script>
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial