Javascript switch statement with input text

Question

<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 here i'm trying to basically have a text field where the user will type in some value based on that value, the script will then look at cases and determine what to output in the paragraph element.

Please advise how i should correct this code.

I see that you are new to stackoverflow. If any of the answers are helpful, please click accept on the one you think is best. If the answers can be improved, comment on them about it. — m59
– m59, Commented Nov 26, 2013 at 3:21

jfriend00 · Accepted Answer · 2013-11-25 04:36:31Z

2

I would suggest this:

<script>

document.getElementById("clicker").onclick = function() {
    var scenario = document.getElementById('scenario').value; 
    var answers = {
        "1": "How are you?",
        "2": "whatevers",
        "3": "i don't know",
        "4": "today is your lucky day",
        "5": "This is the worse case scenario"
    };
    var str = answers[scenario];
    if (str) {
        document.getElementById("answer").innerHTML = str;
    }
}

</script>

The main fix is that you get the value from an <input> field with the .value property.

The rest of the change is a more efficient way to map a typed string to the question.

If your scenarios are always simple sequential numbers, then you could use an array lookup too:

<script>

document.getElementById("clicker").onclick = function() {
    var scenario = document.getElementById('scenario').value; 
    var answers = [
        "How are you?",
        "whatevers",
        "i don't know",
        "today is your lucky day",
        "This is the worse case scenario"
    ];
    if (scenario) {
        var str = answers[+scenario - 1];
        if (str) {
            document.getElementById("answer").innerHTML = str;
        }
}

</script>

In general, if you can find a way to express a switch statement as either an array lookup or an object lookup, you will end up with cleaner, smaller and easier to maintain code.

edited Nov 25, 2013 at 4:36

answered Nov 25, 2013 at 4:30

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

elclanrs Over a year ago

+1 but why not an array answers = [...] and then answers[+scenario]?

jfriend00 Over a year ago

@elclanrs - If the scenarios are only sequential numbers, then an array lookup would also work fine. I added that option too.

Krish R · Accepted Answer · 2013-11-25 04:27:51Z

0

Try using, You need add value property.

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

instead of

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

answered Nov 25, 2013 at 4:27

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

Comments

m59 · Accepted Answer · 2013-11-25 04:42:01Z

0

jfriend00 nailed it regarding the key lookup approach. I am including my answer also, as I have some additional suggestions. Live demo here (click).

/* try to avoid getting your element references inside of functions.
 * If you get them earlier, you don't need to keep searching the dom on each function call 
 */    
var input = document.getElementById('scenario');
var p = document.getElementById('answer');

var responses = [
  "How are you?",
  "whatevers",
  "i don't know",
  "today is your lucky day",
  "This is the worst case scenario"
];

/* I recommend using keyup rather than having to click on a button - save your user some work! */
input.addEventListener('keyup', function() {
  var response;
  if (responses[this.value]) {
    response = responses[this.value];
  }
  else { //do something if you don't have a response
    response = 'No response for this.';
  }
  p.textContent = response;
});

answered Nov 25, 2013 at 4:42

m59

43.9k14 gold badges122 silver badges139 bronze badges

4 Comments

RayC Over a year ago

I see some interesting ideas here. but The purpose here for me is to learn how to use switch statements and get input unobstrusively.

m59 Over a year ago

The problem is that this is a bad use for a switch... did a teacher assign this?? @RayC

RayC Over a year ago

actually, i already have my degree. i'm just self studying and coming up with a different task each day to teach myself. basically, the switch statement is the only one i have some trouble with getting to work unobstrusively.

m59 Over a year ago

@RayC well, your switch statement is fine in the above code. You just need to get the value, not just the element, like this: document.getElementById('scenario').value;

babulakterfsd · Accepted Answer · 2017-05-28 10:43:14Z

// try my answer , hope you will have a better experience

function inputCSS() {
  var text;
  var inputValue = document.getElementById("demo").value;
  if (inputValue < 10) {
   alert ("you can't input a value lower than 10");
  }
  else if (inputValue > 100) {
    alert ("you can't input a value bigger than 100");
  }
}
function awal() {
  var sampleText ;
  var checkInputValue = document.getElementById("demo").value;
  var kopa = Number(checkInputValue);
  if (kopa === 61) {
    sampleText = "hurrah! you have won the lottery";
  }
  else if (kopa > 51 && kopa < 71) {
    sampleText = "too close";
  }
  else {
    sampleText = "bad luck!";
  }
  document.getElementById("sample").innerHTML = sampleText;
}

#demo:invalid {
  border-color:  red;
}
input {
  width: 200px;
}

<input type="number" id="demo" min="10" max="100" value="50"/>
<button onclick="awal()" onmouseover="inputCSS()">submit</button>
<p id="sample"></p>

Collectives™ on Stack Overflow

Javascript switch statement with input text

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related