我对HTML和Javascript非常陌生。 我很感激您提供的任何帮助来改进我的代码。
我正在开发一个计算器,用于显示机场之间的距离。 用户将有五个“文本”输入框,他们将输入机场代码,例如MAD,JFK。 结果将是马德里和JFK之间的距离。 用户可以添加多个机场,如BCN MAD JFK ORD,结果应为所有行程的总和(结果= BCN-MAD + MAD-JFK + JFK-ORD)。
对于我的目的,重要的是我指定距离(因此我不需要“计算”坐标之间的距离)。
我已经创建了名为“leg1,2,3,4”的变量,每个变量对应一组机场,因此leg1可以是“BCNMAD”,然后使用if
语句可以获得该行程距离。 最后有一个totalDistance变量来添加所有行程距离。
由于每个行程都需要单独计算并添加到其他行程中,因此我复制了每个单独行程的if
语句。
这似乎有效,但迄今为止我只添加了8个机场。 实际要求将是大约200个机场。 并且由于每个行程都有自己的一组if
,我可能会得到约800个IFs。
我想知道是否有更好的方法来完成这项工作? 另外,我不知道可以处理多少个if
?
就像我之前说过的,我对HTML和Javascript非常陌生,因此我确定还有更好的解决方案,但是我已经被这个问题困扰了几天,而这是我能想到的最佳解决方案。
所以任何建议或帮助将不胜感激。 我已在下面包含了代码。
顺祝商祺, 麦克
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/>
leg1
...leg4
,而是创建一个数组。遍历它,这样你就可以消除重复的(四倍的)代码。如果这还不够,放弃if
语句并使用单个switch
。 - alesc