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

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

LVL 8
CamilliaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zc2Commented:
because .val() returns a string, but === requires it to be a numeric to return true.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971MultitechnicianCommented:
2
Chris StanyonWebDevCommented:
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 DeveloperCommented:
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

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.