JavaScript switch statement fails to match case

Question

I have the following problem to solve.

Problem 5. Digit as word

Write a script that asks for a digit (0-9), and depending on the input, shows the digit as a word (in English). Print “not a digit” in case of invalid input. Use a switch statement. Examples:

digit   result
2       two
1       one
0       zero
5       five
-0.1    not a digit
hi      not a digit
9       nine
10      not a digit

=

Here's my JavaScript and HTML HTML:

<input type="text" id="textInput">
<button id="react">Check</button>
<p id="result"></p>

My JavaScript:

document.addEventListener("DOMContentLoaded",function(){

   var input = document.getElementById('textInput');
   var button = document.getElementById('react');
   var result = document.getElementById('result');


   button.addEventListener('click',function(){

       switch (input.value) {
           case 0:
               result.innerHTML = 'zero';
               break;
           case 1:
               result.innerHTML = 'one';
               break;
           case 2:
               result.innerHTML = 'two';
               break;
           case 3:
               result.innerHTML = 'three';
               break;
           case 4:
               result.innerHTML = 'four';
               break;
           case 5:
               result.innerHTML = 'five';
               break;
           case 6:
               result.innerHTML = 'Six';
               break;
           case 7:
               result.innerHTML = 'Seven';
               break;
           case 8:
               result.innerHTML = 'Eight';
               break;
           case 9:
               result.innerHTML = 'Nine';
               break;
           default:
               result.innerHTML = 'not a digit';
               break;
       }

   });

});

The problem is that when I type a number from 0-9 it shows the default statement.

See http://stackoverflow.com/questions/6989902/is-it-safe-to-assume-strict-comparison-in-a-javascript-switch-statement — Ruan Mendes, Apr 09 '16 at 13:30

score 8 · Accepted Answer · edited Apr 09 '16 at 13:34

8

The value is in string format. Convert it to number because switch statements do not coerce types (unlike if statements)

switch(+input.value) {

OR

switch(parseInt(input.value, 10)) {

I'll also suggest to use array or object.

var arr = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];

result.innerHTML = arr[+input.value] || 'Not a Digit';

edited Apr 09 '16 at 13:34

Ruan Mendes

90,375
31
153
217

answered Apr 09 '16 at 13:22

Tushar

85,780
21
159
179

Does input.value is always a string? – Nasco.Chachev Apr 09 '16 at 13:24
So if I set to , then my switch statement will works without having to parse it into a number? – Nasco.Chachev Apr 09 '16 at 13:25
1

@Nasco.Chachev No. ANYTHING that is read from the DOM is string. You've to manually convert it to number. – Tushar Apr 09 '16 at 13:25
@Tushar oh , I didn't know that mate, thank you a lot! in 10 minutes i`ll mark your answer as checked.Thank you for being so helpful!!!! – Nasco.Chachev Apr 09 '16 at 13:26
2

You can use[`input.valueAsNumber()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#property-valueasnumber) – Ruan Mendes Apr 09 '16 at 13:27
3

That's interesting I thought `switch` would coerce types [but I was wrong](http://stackoverflow.com/a/6989959/227299). From the EcmaScript standard: `If input is equal to clauseSelector as defined by the === operator, then...` http://www.ecma-international.org/ecma-262/5.1/#sec-12.11 – Ruan Mendes Apr 09 '16 at 13:29

JavaScript switch statement fails to match case

I have the following problem to solve.

1 Answers1