SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    using the switch statement with text input fields

    Code:
    <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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Here's an example of how it might work:

    Code:
    <!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. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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. #5
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    Here's an example of how it might work:

    Code:
    <!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")

    Code:
    <!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. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
         
    
       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. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by wc43870n View Post
    Thanks for the tips. hope what i did with the innerHTML is good practice.
    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:

    Quote Originally Posted by wc43870n View Post
    please let me know if you see anything is should correct in the code above.
    The code is ok, but you need to pay attention to your naming.

    Code:
    <p id="outty"></p>
    would be better like:

    Code:
    <p id="result"></p>
    Code:
    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. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by wc43870n View Post
    Code:
         
    
       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 ? ???
    Read this article from Smashing Magazine and all of your questions will be answered

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •