Anyway of simplifying javascript if else

Question

I have a select list that will be filled with date of birth ranges, and each one will have a specific answer that will need returning, I am a beginner with javascript and have managed to get it to wor how I want using an if else statement.

the problem is that this list will need to have 40 entries and subsequently 40 answers, which will lead to one hell of a big if statement.

can anyone suggest a simplified way of coding this.

thanks.

<body>
<select id="DobRange">
<option value="" >Please select a date range</option>
<option value="1" >Dob range 1</option>
<option value="2" >Dob range 2</option>
<option value="3" >Dob range 3</option>
<option value="4" >Dob range 4</option>
</select>

<button onclick="message()">Go</button>

<div id="PassTxt"></div>

<script type="text/javascript">
function message(){
var s = document.getElementById('DobRange');
var DobRange = s.options[s.selectedIndex].value;

if (DobRange == "1"){
document.getElementById("PassTxt").innerHTML = "Answer 1";
}
else if (DobRange == "2"){
document.getElementById("PassTxt").innerHTML = "Answer 2";
}
else if (DobRange == "3"){
document.getElementById("PassTxt").innerHTML = "Answer 3";
}
else if (DobRange == "4"){
document.getElementById("PassTxt").innerHTML = "Answer 4";
}
}
</script>

Cerbrus · Accepted Answer · 2014-09-16 11:48:45Z

1

Simple, just use the DobRange variable in your text:

if(DobRange !== ""){
    document.getElementById("PassTxt").innerHTML = "Answer " + DobRange;
}

You won't need that entire if / else structure.

answered Sep 16, 2014 at 11:48

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

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

Comments

laruiss · Accepted Answer · 2014-09-16 11:51:36Z

0

I would do:

<body>
<select id="DobRange">
<option value="" >Please select a date range</option>
<option value="1" >Dob range 1</option>
<option value="2" >Dob range 2</option>
<option value="3" >Dob range 3</option>
<option value="4" >Dob range 4</option>
</select>

<button onclick="message()">Go</button>

<div id="PassTxt"></div>

<script type="text/javascript">
function message(){
  var s = document.getElementById('DobRange');
  var DobRange = s.options[s.selectedIndex].value;

  if (DobRange !== ""){
    document.getElementById("PassTxt").innerHTML = "Answer " + DobRange;
  }
}
</script>

answered Sep 16, 2014 at 11:51

laruiss

3,8261 gold badge21 silver badges29 bronze badges

Comments

s.alem · Accepted Answer · 2014-09-16 11:59:46Z

If what you need is always "Answer " + DobRange then I'ld go with Cerbrus' answer. But if you want to eliminate else if statements generally for this kind of use cases, you can use switch case:

var answer = '';
switch (Dobrange){
    case 1:
    answer = "Answer 1";
    break;
    case 2:
    answer = "Answer 2";
    break;
    case 3:
    answer = "Answer 3";
    break;
    case 4:
    answer = "Answer 4";
    break;
    default:
    answer = "No answer";
}
document.getElementById("PassTxt").innerHTML = answer;

But personally I find a state-like pattern more useful:

var answers={
   ans_1: "Answer 1",
   ans_2: "Answer 2",
   ans_3: "Answer 3",
   ans_4: "Answer 4",
   ans_: "No answer"
};
var pointer = "ans_" + DobRange;
document.getElementById("PassTxt").innerHTML = answers[pointer];

Collectives™ on Stack Overflow

Anyway of simplifying javascript if else

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related