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>
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 compares 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 recommend 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 comparison operator. It compares '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))
Related
This question already has answers here:
Switch case with conditions
(8 answers)
Closed 2 years ago.
var age = 16;
switch (true) {
case age < 16:
console.log("is a boy, he only drinks juice");
break;
case age >= 16 && age <= 20:
console.log("he can drink beer now ");
break;
default:
console.log("This is not working");
}
var age = 13;
switch (age) {
case age < 16:
console.log("is a boy, he only drinks juice");
break;
case age >= 16 && age <= 20:
console.log("he can drink beer now ");
break;
default:
console.log("This is not working");
}
why the second switch is not working ? and the first one works and how is it possible to make the second switch work ?
switch-case compares equality between the value resulted in the expression and the values defined as cases.
In your first statement the expression is true which is the value you want to compare, so the cases should be case true and case false.
In your code to wrote 'age>=16' etc... These are actually values of true or false, therefore the value in the switch can be compared to the cases.
In your second statement, you try to compare age which is an integer, with cases that are booleans, therefore, no case will be hit.
In your case, switch-case statement isn't suitable to your propose (you can use if-else)
This question already has answers here:
javascript switch(true)
(5 answers)
Closed 5 years ago.
Good afternoon!
Why does the first option work - switch (true), and the second option does not work - switch (a)?
First:
var a= prompt('Enter value', '');
switch(true)
{
case a>10:
alert('a>10');
break;
case a<10:
alert('a<10');
break;
default:
alert('a===10');
Second:
var a= prompt('Enter value', '');
switch(a)
{
case a>10:
alert('a>10');
break;
case a<10:
alert('a<10');
break;
default:
alert('a===10');
Why does the first option work - switch (true), and the second option
does not work - switch (a)?
As per documentation
The switch statement evaluates an expression, matching the
expression's value to a case clause, and executes statements
associated with that case.
So, in your first option true will match to either a < 10 or a > 10, however in second option, a being a string may not match to either of them.
Edit: I just realize OP ask for the difference instead of why it won't work, sorry for misunderstanding the question
It should work nicely
var a = prompt('Enter value', '');
switch (true) {
case (a > 10):
alert("a > 10");
break;
case (a < 10):
alert("a < 10");
break;
default:
alert('a == 10');
}
It's because a > 10 is true, like the switch(true), while switch(a) was passed a, which is not true. Of course, you should cast a. a = +a or use parseInt() or parseFloat().
Here's what you probably meant to do:
var a = prompt('Enter value');
if(+a > 10){
alert('a > 10');
}
else if(a !== '' && +a < 10){
alert('a < 10');
}
else if(+a === 10){
alert('a === 10');
}
else{
alert('Really, you should avoid using prompt and alert!');
}
// notice this is less code than that pointless switch
You need to convert the user input from a string to an integer, like so
a = parseInt(a)
I'm trying this simple code and seems like the user's input is not going through all the comparisons and jumps to the default one right away. I'm guessing that JS is taking the user's input as a string instead. I did try to parseInt() but didn't work. Here is my code;
var number = prompt('What\'s your favority number?');
switch(number){
case (number < 10):
console.log('Your number is to small.');
break;
case (number < 100):
console.log('At least you\'re in the double digits.');
break;
case (number < 1000):
console.log('Looks like you\'re in three digits.');
break;
default:
console.log('Looks like you\'re in the fouth digits.');
}
Use true as an expression for switch.
The switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.[Ref]
A switch statement first evaluates its expression. It then looks for the first case clause whose expression evaluates to the same value as the result of the input expression (using strict comparison, ===) and transfers control to that clause, executing the associated statements. (If multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.) . If no matching case clause is found, the program looks for the optional default clause, and if found, transfers control to that clause, executing the associated statements.
var number = prompt('What\'s your favority number?');
number = Number(number); //Use `Number` to cast it as a number
switch (true) {
//----^^^^
case (number < 10):
console.log('Your number is to small.');
break;
case (number < 100):
console.log('At least you\'re in the double digits.');
break;
case (number < 1000):
console.log('Looks like you\'re in three digits.');
break;
default:
console.log('Looks like you\'re in the fouth digits.');
}
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
Edit: As suggested by #bergi in the comments, an if/else cascade is the best approach for this problem.
var number = prompt('What\'s your favority number?');
number = Number(number); //Use `Number` to cast it as a number
if (number < 10)
console.log('Your number is to small.');
else if (number < 100)
console.log('At least you\'re in the double digits.');
else if (number < 1000)
console.log('Looks like you\'re in three digits.');
else
console.log('Looks like you\'re in the fouth digits.');
You're not understanding how the switch statement works. It is not a shortcut for checking dynamic values. It's a shortcut for checking known values.
Each case is a statement that gets evaluated to a value. If you look at the docs, you'll see that they have case: value, rather than what you are attempting, which is case: (expression). So, it's going to turn all your expressions into values.
So, for example, your first case is:
case (number < 10):
But what that really becomes is:
case false:
And of course, no number will evaluate to false (technically 0 is a falsey value, but the switch uses === comparison rather than == so 0 === false // false). Thus, all your cases are really case false, and so the switch is falling through all of them and landing on the default case.
So, for your situation, the switch statement is inappropriate. You should use if statements.
if(number < 10) {
} else if(number < 100) {
} else if(number < 1000) {
} else {
}
The switch statement is only appropriate when you know the values:
switch(number) {
case 10:
break;
case 100:
break;
case 1000:
break;
default:
}
(And yes, use parseInt to ensure you have integers.)
Im not sure if I can use switch only for strings or that I can use it for numbers, booleans or events.
switch() can be used to compare any types: strings, objects, numbers.
The important thing to notice that switch() uses strict type comparison: ===.
For example:
Comparing strings
var a = '1';
switch (a) {
case 1:
console.log(1); // '1' === 1 returns false, no match
break;
default:
console.log('No match'); // will print 'No match'
}
Comparing objects
var a = 1;
switch (a.constructor) {
case Number:
console.log('number'); // prints 'number'
break;
case String:
console.log('string');
break;
default:
console.log('no match');
}
Im not sure if I can use switch only for strings
Nope, it should just be a valid expression as per the spec
See this demo,
this code alerts right
var a =1;
var b = 2;
switch(a+b)
{
case 1:
alert("wrong");
break;
case 2:
alert("wrong");
break;
case 3:
alert("right");
break;
default:
alert("wrong");
break;
}
I have problem with a variable I made (it's a string) in JavaScript. It will be prompt from the user and then with the switch I will check if it is true or not. Then when I input it upper case it will say it is identified as a another var.
Here is my code:
var grade = prompt("Please enter your class") ;
switch ( grade ){
case "firstclass" :
alert("It's 500 $")
break;
case "economic" :
alert("It's 250 $")
break;
default:
alert("Sorry we dont have it right now");
}
Just lower case it initially.
var grade = prompt("Please enter your class").toLowerCase() ;
as #nicael stated just lowercase what they input. However, if you need to preserve the way it was input and only compare using the lowercase equivalent, use this:
var grade = prompt("Please enter your class") ;
switch ( grade.toLowerCase() ){
case "firstclass" :
alert("It's $500");
break;
case "economic" :
alert("It's $250");
break;
default :
alert("Sorry we don't have it right now");
}
You could set the entire string to lower case by using the String prototype method toLowerCase() and compare the two that way.
To keep the input the same, mutate the string during your switch statement:
switch( grade.toLowerCase() ) {
// your logic here
}
You should always compare uppercase string with uppercase values in case sensitive languages.
Or lower with lower.
var grade = prompt("Please enter your class") ;
switch (grade.toUpperCase())
{
case "FIRSTCLASS" :
alert("It's 500 $")
break;
case "ECONOMIC" :
alert("It's 250 $")
break ;
default :
alert("Sorry we dont have it right now");
}