CODEWITHSUNDEEP
javascriptif-statement
liam oliver
liam oliver

Reputation: 1

Anyway of simplifying javascript if else

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>

Upvotes: 0

Views: 60

Answers (3)

s.alem
s.alem

Reputation: 13079

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];

Upvotes: 0

laruiss
laruiss

Reputation: 3816

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>

Upvotes: 0

Cerbrus
Cerbrus

Reputation: 72857

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.

Upvotes: 1

Related Questions