asked on

== 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

ASKER CERTIFIED SOLUTION

zc2

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

EXPERT CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

vogen gurung

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

vogen gurung

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