Using the switch statement with text input fields

JavaScript
1 

<script>

document.getElementById("clicker").onclick=function(){

var scenario = document.getElementById('scenario'); 



switch(scenario)
{
case 1: 
document.getElementById("answer").innerHTML="How are you?";
break;

case 2: 
document.getElementById("answer").innerHTML="whatevers";
break;

case 3: 
document.getElementById("answer").innerHTML="i don't know";
break;

case 4: 
document.getElementById("answer").innerHTML="today is your lucky day";
break;

default: 
document.getElementById("answer").innerHTML="This is the worst case scenario";

}

}

</script>

<input type="text" id="scenario" />
<input type="submit" id="clicker" />

<p id="answer"></p>

So i’m trying to learn how to use the switch statement in javascript and code it unobstrusively.

Please tell me why my code above doesn’t work?

trying to basically have the user enter in something and base on the case have the text display.

2

Hi there,

Here’s an example of how it might work:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Switch Statement</title>
  </head>

  <body>
    <form>
      <p>
        <label>Please enter your favourite colour:</label>
        <input type="text" id="colour" />
      </p>
      <input type="submit" />
    </form>

    <script>
      function processAge(event){
        var colour = colourField.value,
            output;

        switch (colour) {
          case "orange":
            output = "Orange is warm";
            break;
          case "blue":
            output = "Blue is cold";
            break;
          case "white":
            output = "Yeah Mr. White!";
            break;
          default:
            output = "I don't have anything to say about that";
        }

        console.log(output)
        event.preventDefault();
      }
      var form = document.forms[0],
          colourField = document.getElementById('colour');

      form.addEventListener('submit', processAge, false);
    </script>
  </body>
</html>

Try applying this to your code and let me know if you run into any problems.

Also, avoid querying the DOM all the time.
You can cache this in a variable: document.getElementById("answer")

3

hi, thanks for the assist. I tried the code however, when i put orange or blue in there for example, the text i entered in the text field just disappears and no output showsup.

4

Hi,

The text shouldn’t disappear. Sounds like the form is submitting.
Which browser are you using.

The output of the switch statement is logged to the console.
Do you know how to access that?

5 

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Switch Statement</title>
  </head>
  
  <body>
    <form>
      <p>
        <label>Please enter your favourite colour:</label>
        <input type="text" id="colour" />
      </p>
      <input type="submit" />
    </form>

<p id="outty"></p>
    <script>
      function processAge(event){
        var colour = colourField.value,
            output;
        
        switch (colour) {
          case "orange":
            output = "Orange is warm";
            break;
          case "blue":
            output = "Blue is cold";
            break;
          case "white":
            output = "Yeah Mr. White!";
            break;
          default:
            output = "I don't have anything to say about that";
        }

        document.getElementById("outty").innerHTML=output; 
        
        event.preventDefault();
      }
      var form = document.forms[0],
          colourField = document.getElementById('colour');

      form.addEventListener('submit', processAge, false);
    </script>
  </body>
</html>

see above for what i decided to do. Thanks for the tips. hope what i did with the innerHTML is good practice. please let me know if you see anything is should correct in the code above.

6 
     

   event.preventDefault();
      }
      var form = document.forms[0],
          colourField = document.getElementById('colour');

      form.addEventListener('submit', processAge, false);

i’m wondering what the event.preventDefault(); does and how does it work?

is it basically the argument from the function processage.preventDefault();

which object does this preventdefault function come from?

and what are the arguments that go into the addeventlistener function, i see submit, processage, and false

what do each of the arguments do or represent?

is submit the event handler like on submit or something and processage in the addeventlistener is just the event handler function, and false is for ? ???

7

Hi,

There are those who say that innerHTML is evil.
One of the reasons for this is that it makes your JS ugly and unreadable in no time.
However, while this may be true for larger projects, it’s fine for what we are doing here.
If you’re interested, here are some alternatives:

The code is ok, but you need to pay attention to your naming.

<p id="outty"></p>

would be better like:

<p id="result"></p>

colourField = document.getElementById('colour');
form.addEventListener('submit', processAge, false);

What’s with calling the input element “colourField” and the event handler “processAge”?

I know this is only sample code to demonstrate a concept, but if you get into the habit of giving things sensible names, it’ll help you in the long run.

8

Read this article from Smashing Magazine and all of your questions will be answered :slight_smile:

Be sure to post back here if anything you read is unclear.