Alternative to multiple "if statements?

Question

I'm really new to HTML and Javascript. I'd appreciate any help with the code I'm writing.

I'm working on a calculator to display the distance between airports. The user will have five "text" inputs, so they will write airport codes, say MAD, JFK. The result would be the distance between Madrid and JFK. The user can add several airports such as BCN MAD JFK ORD, and the result should be the total addition of all legs (result = BCN-MAD + MAD-JFK + JFK-ORD).

For my purpose, it's also important that the distances are specified by me (so I dont need to "calculate" distances between coordinates).

What I've done is I've created variables called "leg1,2,3,4" which pair each airport, so leg1 can be for example "BCNMAD" and then using if statements I can get the distance for that leg. Finally there's a totalDistance variable to add all the leg distances.

Because each leg needs to be calculated separately and added to the other legs, I've copied the if statements for each separate leg.

This seems to work just fine, the problem is so far I've added just 8 airports. The actual requirement will be approx 200 airports. And because each leg has its own set of if, I could end up with about 800 IFs.

I was wondering if there's any better way to do this? Also, I dont know if there's a limit to how many if can be handled?

Like I said before I'm very new to HTML and Javascript so I'm sure there are much better options to do this, but I've been stuck with this issue for days and this is the best solution I could come up with.

So any advice or help would be very appreciated. I've included the code below.

regards, Mike

function displayDistance()
{
var leg1 = {route:document.getElementById("air1").value + document.getElementById("air2").value , distance:""};
var leg2 = {route:document.getElementById("air2").value + document.getElementById("air3").value , distance:""};
var leg3 = {route:document.getElementById("air3").value + document.getElementById("air4").value , distance:""};
var leg4 = {route:document.getElementById("air4").value + document.getElementById("air5").value , distance:""};

if (leg1.route == "AGPMAD" || leg1.route == "MADAGP") {leg1.distance = 430;}
if (leg1.route == "BCNMAD" || leg1.route == "MADBCN") {leg1.distance = 483;}
if (leg1.route == "LHRMAD" || leg1.route == "MADLHR") {leg1.distance = 1246;}
if (leg1.route == "CDGMAD" || leg1.route == "MADCDG") {leg1.distance = 1065;}
if (leg1.route == "JFKMAD" || leg1.route == "MADJFK") {leg1.distance = 5777;}
if (leg1.route == "ORDJFK" || leg1.route == "JFKORD") {leg1.distance = 1191;}
if (leg1.route == "JFKMCO" || leg1.route == "MCOJFK") {leg1.distance = 1520;}
if (leg1.route == "JFKIAD" || leg1.route == "IADJFK") {leg1.distance = 367;}

if (leg2.route == "AGPMAD" || leg2.route == "MADAGP") {leg2.distance = 430;}
if (leg2.route == "BCNMAD" || leg2.route == "MADBCN") {leg2.distance = 483;}
if (leg2.route == "LHRMAD" || leg2.route == "MADLHR") {leg2.distance = 1246;}
if (leg2.route == "CDGMAD" || leg2.route == "MADCDG") {leg2.distance = 1065;}
if (leg2.route == "JFKMAD" || leg2.route == "MADJFK") {leg2.distance = 5777;}
if (leg2.route == "ORDJFK" || leg2.route == "JFKORD") {leg2.distance = 1191;}
if (leg2.route == "JFKMCO" || leg2.route == "MCOJFK") {leg2.distance = 1520;}
if (leg2.route == "JFKIAD" || leg2.route == "IADJFK") {leg2.distance = 367;}

if (leg2.route == "AGPMAD" || leg2.route == "MADAGP") {leg2.distance = 430;}
if (leg3.route == "BCNMAD" || leg3.route == "MADBCN") {leg3.distance = 483;}
if (leg3.route == "LHRMAD" || leg3.route == "MADLHR") {leg3.distance = 1246;}
if (leg3.route == "CDGMAD" || leg3.route == "MADCDG") {leg3.distance = 1065;}
if (leg3.route == "JFKMAD" || leg3.route == "MADJFK") {leg3.distance = 5777;}
if (leg3.route == "ORDJFK" || leg3.route == "JFKORD") {leg3.distance = 1191;}
if (leg3.route == "JFKMCO" || leg3.route == "MCOJFK") {leg3.distance = 1520;}
if (leg3.route == "JFKIAD" || leg3.route == "IADJFK") {leg3.distance = 367;}

if (leg4.route == "AGPMAD" || leg4.route == "MADAGP") {leg4.distance = 430;}
if (leg4.route == "BCNMAD" || leg4.route == "MADBCN") {leg4.distance = 483;}
if (leg4.route == "LHRMAD" || leg4.route == "MADLHR") {leg4.distance = 1246;}
if (leg4.route == "CDGMAD" || leg4.route == "MADCDG") {leg4.distance = 1065;}
if (leg4.route == "JFKMAD" || leg4.route == "MADJFK") {leg4.distance = 5777;}
if (leg4.route == "ORDJFK" || leg4.route == "JFKORD") {leg4.distance = 1191;}
if (leg4.route == "JFKMCO" || leg4.route == "MCOJFK") {leg4.distance = 1520;}
if (leg4.route == "JFKIAD" || leg4.route == "IADJFK") {leg4.distance = 367;}

  
var totalDistance = leg1.distance + leg2.distance + leg3.distance + leg4.distance;
  
document.getElementById("distanceresult").innerHTML = totalDistance;
}

<span>Route: </span>
<input type="text" class="airinput" id="air1" value="" required=""/>
<input type="text" class="airinput" id="air2" value="" required=""/>
<input type="text" class="airinput" id="air3" value="" required=""/>
<input type="text" class="airinput" id="air4" value="" required=""/>
<input type="text" class="airinput" id="air5" value="" required=""/>
<br/>
<input type="button" onClick="displayDistance();" value="Calculate Distance"/><br/>
<span>The total distance is: </span><span id="distanceresult"></span><br/>

Answer 1

Instead of hardcoding your data into a long set of conditionals you are better using an object. This lends itself better to transitioning to a databased solution, which would be the way this is normally handled.

var distances_ = {
  "AGPMAD": 430,
  "MADAGP": 430,
  "BCNMAD": 483,
  "LHRMAD": 1246,
};
leg1.distance =  distances_[ leg1.route ] );

If you are operating entirely in Javascript, you can use a JSON text file and an AJAX call in place of a database to remove the distance data entirely from your code.

Answer 2

There is no need to duplicate each block of if statements, you should turn them into a function and then do something like this:

function getLegDistance(route) {
    if (route == "AGPMAD" || route == "MADAGP") return 430;
    if (route == "BCNMAD" || route == "MADBCN") return 483;
    if (route == "LHRMAD" || route == "MADLHR") return 1246;
    if (route == "CDGMAD" || route == "MADCDG") return 1065;
    if (route == "JFKMAD" || route == "MADJFK") return 5777;
    if (route == "ORDJFK" || route == "JFKORD") return 1191;
    if (route == "JFKMCO" || route == "MCOJFK") return 1520;
    if (route == "JFKIAD" || route == "IADJFK") return 367;
}

var totalDistance = getLegDistance(leg1.route) + getLegDistance(leg2.route) + getLegDistance(leg3.route) + getLegDistance(leg4.route)

That way you only have one block of if statements, and you can call it for every route you have. You could also use a switch statement instead of all of the if statements but it won't cut down on your line count (it would improve your performance though), so an object/map would probably be better.

Answer 3

Use the switch.

Here is the reference:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

example:

switch (expression) {
  case value1:
    //Statements executed when the result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the result of expression matches valueN
    [break;]
  default:
    //Statements executed when none of the values match the value of the expression
    [break;]
}