CODEWITHSUNDEEP
javascriptswitch-statement
RayC
RayC

Reputation: 1

Javascript switch statement with input text

<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.

Upvotes: 0

Views: 3332

Answers (4)

babulakterfsd
babulakterfsd

Reputation: 13

// 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>

Upvotes: 0

m59
m59

Reputation: 43795

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;
});

Upvotes: 0

jfriend00
jfriend00

Reputation: 708106

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.

Upvotes: 2

Krish R
Krish R

Reputation: 22741

Try using, You need add value property.

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

instead of 

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

Upvotes: 0

Related Questions