HTML Select using JavaScript not working

Question

Please examine the switch statement

Only default option works.

case x="Fin" and case x="Intercom" are not working. Not sure why. Thanks!

Code:

 <p>Niche</p>
 <select name="niche" id="niche" onchange="FCM_niche()">
 <option value="empty" selected="">Select Niche</option>
 <option value="fin">FIN</option>
 <option value="intercom">Intercom</option>
 </select>
 <script type="text/javascript">
 function FCM_niche() {
 var x = document.getElementById("niche").value;
 switch (true) {
 case x="FIN":
 document.getElementById("FCM_select_niche").innerHTML = "FFFF";
 break;
 case x="Intercom":
 document.getElementById("FCM_select_niche").innerHTML = "IIII";
 break;
 default:
 document.getElementById("FCM_select_niche").innerHTML = "DDDD";
 }
 };
 </script>
<div id="FCM_select_niche"> 
</div>

• Bango: your switch statement is done wrong. switch (true) negates the whole point of having the switch in the first place.
• nnnnnn: @Bango - switch(true) is perfectly valid. But in the cases it should be == or ===, not =, i.e., it should be a comparison, not an assignment. (= isn't a syntax error, but it doesn't do what the OP wants.)
• Bango: I'm not debating that it's valid. It just isnt how switch is meant to be used.

Answer 1

Please take a look at this JS fiddle showing the working version of your code: https://jsfiddle.net/jspruance/ebjnqt2r/

Just make a few small tweaks to your JS and you should be up and running.

1) Base your switch statement on the 'x' variable: 'switch(x)'

2) Base each case on the selected value (instead of the displayed text): ex: case "fin"

function FCM_niche() {
 var x = document.getElementById("niche").value;
 switch(x) {
 case "fin":
 document.getElementById("FCM_select_niche").innerHTML = "FFFF";
 break;
 case "intercom":
 document.getElementById("FCM_select_niche").innerHTML = "IIII";
 break;
 default:
 document.getElementById("FCM_select_niche").innerHTML = "DDDD";
 }
};

This should do the trick...good luck.

Answer 2

Your switch statement is invalid. Also, you are checking switch case against selected text not on value

 <p>Niche</p>
 <select name="niche" id="niche" onchange="FCM_niche()">
 <option value="empty" selected="">Select Niche</option>
 <option value="fin">FIN</option>
 <option value="intercom">Intercom</option>
 </select>
 <script type="text/javascript">
 function FCM_niche() {
 var x = document.getElementById("niche").value;
 switch (x) {
 case "fin":
 document.getElementById("FCM_select_niche").innerHTML = "FFFF";
 break;
 case "intercom":
 document.getElementById("FCM_select_niche").innerHTML = "IIII";
 break;
 default:
 document.getElementById("FCM_select_niche").innerHTML = "DDDD";
 }
 };
 </script>
<div id="FCM_select_niche"> 
</div>

• nnnnnn: "Your switch statement is invalid." - What do you mean "invalid"? It is perfectly valid JS syntax that will run without error, it just doesn't do what the OP expects.
• ajai Jothi: I mean the whole statement, not debating on the syntax @nnnnnn

Answer 3

Your switch case is wrong

This one is correct

function FCM_niche() {
 var x = document.getElementById("niche").value;
 switch (x) {
 case "fin":
 document.getElementById("FCM_select_niche").innerHTML = "FFFF";
 break;
 case "intercom":
 document.getElementById("FCM_select_niche").innerHTML = "IIII";
 break;
 default: document.getElementById("FCM_select_niche").innerHTML = "DDDD";
 break;
 }
 };

you need to just pass variable with switch(YOUR_VAR)

and just compare it with CASE "YOUR STRING":

Also javascript is case sensitive language , So FIN & fin is not equal value.

Answer 4

var x = document.getElementById("niche").value;
switch (x) {
 case "FIN":
 document.getElementById("FCM_select_niche").innerHTML = "FFFF";
 break;
 case "Intercom":
 document.getElementById("FCM_select_niche").innerHTML = "IIII";
 break;
 default:
 document.getElementById("FCM_select_niche").innerHTML = "DDDD";
}