(JavaScript) Использование оператора switch с полем ввода

Question

Новое на JavaScript, пожалуйста, простите меня, если у этого есть очевидный ответ. Я пытаюсь получить оператор switch для вывода определенной фразы в зависимости от значения поля ввода, однако он будет выводить только параметр по умолчанию. Что я сделал не так? Благодарю.

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

Answer 1

A switch работ по проверке значения выражения в switch(expression) против значений каждого case до тех пор, пока не найдет тот, который соответствует.

В вашем коде userinput в switch(userInput) является строка, но ваши два case заявления оба имеют значение либо true или false. Поэтому вы хотите использовать switch(true) - вот как вы получаете switch для работы с произвольными условиями для каждого case. В контексте:

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

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

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

Answer 2

В принципе, switch не поддерживает условные выражения. Он просто переходит к значению в зависимости от случаев.

Если вы положили true в часть switch (true), он перейдет к корпусу, имеющему истинное значение.

Попробуйте как этот

switch (true) { 

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

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

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

Answer 3

Вы не можете использовать логические условия в вашем switch заявлении. Он фактически сравнивает ваш userinput с результатом состояния (true \ false), которого никогда не происходит.

Используйте условия вместо:

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. Вы можете использовать switch с логическими выражениями таким образом:

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

, но я настоятельно рекомендую не использовать этот подход, потому что это делает ваш код труднее читать и поддерживать.

Answer 4

Попробуйте так:

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