New to JavaScript so please forgive me if this has an obvious answer. I'm trying to get a switch statement to output a specific phrase depending on the value of an input box, however it will only output the default option. What have I done wrong? Thanks.

<input id="inputIQ" type="number"/>
<button onclick="inputIQFunction()">Submit</button>
<script>
function inputIQFunction()
{
var userinput = document.getElementById("inputIQ").value;
switch (userinput) {

case userinput <= 10:
alert("Less than 10");
break;

case userinput > 10:
alert("Greater than 10");
break;

default:
alert("Please input value");
break;
}
}
</script>

New to JavaScript so please forgive me if this has an obvious answer. I'm trying to get a switch statement to output a specific phrase depending on the value of an input box, however it will only output the default option. What have I done wrong? Thanks.

<input id="inputIQ" type="number"/>
<button onclick="inputIQFunction()">Submit</button>
<script>
function inputIQFunction()
{
var userinput = document.getElementById("inputIQ").value;
switch (userinput) {

case userinput <= 10:
alert("Less than 10");
break;

case userinput > 10:
alert("Greater than 10");
break;

default:
alert("Please input value");
break;
}
}
</script>

• javascript
• html
• switch-statement

• 1 What have I done wrong? - you tell me. In what way is the code not working as intended? – Andrew Li Commented Nov 1, 2016 at 3:11
• just use an if/else chain it's more suited for this situation, you don't have to use a switch case for everything. – Koborl Commented Nov 1, 2016 at 6:40

6 Answers 6

Basically, switch doesn't support conditional expressions. It just jumps to the value according to the cases.

If you put true in the switch (true) part, it'll jump to the case whose have true value.

Try like this

switch (true) {

  case userinput <= 10: 
    alert("Less than 10");
    break;

  case userinput > 10:
    alert("Greater than 10");
    break;

  default:
    alert("Please input value");
    break;
}

You cannot use logical conditions in your switch statement. It actually pares your userinput to a result of condition (true \ false), which never occurs.

Use conditions instead:

function inputIQFunction() {  
  function getIQFunctionOutput(inputValue) {
    var parsedInput = parseInt(inputValue);

    if (Number.isNaN(parsedInput))
      return "Please, enter a correct value";

    return parsedInput <= 10
      ? "Less or equal than 10"
      : "Greater than 10";
  }

  var userinput = document.getElementById("inputIQ").value;
  var output = getIQFunctionOutput(userinput);
  alert(output);
}

<input id="inputIQ" type="number" />
<button onclick="inputIQFunction()">Submit</button>

P.S. You can actually use switch with logical statements this way:

switch (true) {
    case userinput <= 10:
        break;
    case userinput > 10:
        break;
}

but I would highly remend not to use this approach because it makes your code harder to read and maintain.

Try like this:

<input id="inputIQ" type="number"/>
<button onclick="inputIQFunction()">Submit</button>
<script>
function inputIQFunction() {
    var userinput = document.getElementById("inputIQ").value;
    userinput = parseInt(userinput);
    switch (true) {

        case userinput <= 10:
            alert("Less than 10");
            break;

        case userinput > 10:
            alert("Greater than 10");
            break;

        default:
            alert("Please input value");
            break;
      }
  }
</script>

A switch works by testing the value of the expression in switch(expression) against the values of each case until it finds one that matches.

In your code, the userinput in switch(userInput) is a string, but your two case statements both have a value of either true or false. So you want to use switch(true) - that's how you get a switch to work with arbitrary conditions for each case. In context:

switch(true) {
  case userinput <= 10:
    alert("Less than 10");
    break;

  case userinput > 10:
    alert("Greater than 10");
    break;

  default:
    alert("Please input value");
    break;
}

I know this is an old thread but I'm just starting out on JS (one week in) and this is the simplest thing I could create just so the logic is understood.

Switch appears to work only by true/false when using a user input value.

My script looks like:

<script>

document.getElementById("click").onclick = function () {
    var day = document.getElementById("day").value;

    switch (true) {
        case day == 1:
            document.write("Monday");
            break;
        case day == 2:
            document.write("Tuesday");
            break;
        default:
            document.write("Please enter valid number")
    }

</script>

Like I said I'm only a week into this but I'm making a small portfolio for myself with these little things that courses may not teach, I'm open to any one wishing to offer me help learning also, hope it helps with understanding the logic.

You are not fulfilling the requirements of 'switch & case'

userinput <= 10: It means 'true' because '<=' is a parison operator. It pares 'userinput' and ’10'(given value) and give you an answer in boolean(i.e. true or false). But, here in switch case you need an integer value.

Another

You have entered this 'switch (userinput)' here 'switch' considering 'userinput' a string that should be integer, You can fix it with this.

switch (eval(userinput))