javascript宝典中的一道题,关联数组的思考和实现

 

下表中给出了太阳系4个行星的部分数据,创建一个WEB页面,实现以下功能,当用户输入

星名后,单击按钮在对话框或页面的其他区域显示距离和直径
行星 离太阳的距离 直径
水星 3千6百万英里 3100英里
金星 6千7百万英里 7700英里
地球 9千3百万英里 7920英里
火星 1亿4千百万英里 4200英里 

 

实现代码:

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< script  language ="JavaScript"  type ="text/javascript" > ...
var arrStarId=["水星","金星","地球","火星"];
var arrStarDetails=["离太阳的距离:3千6百万英里;直径:3100英里","离太阳的距离:6千7百万英里;直径:7700英里","离太阳的距离:9千3百万英里;直径:7920英里","离太阳的距离:1亿4千百万英里;直径:4200英里"];

function showDetails(element)...{ //用双数组方法
var value=element.value;
for(var i=0;i<arrStarId.length;i++)
...{
if (arrStarId[i]===value) return  alert(arrStarDetails[i])
}
}

</ script >
< title > Test关联数组 </ title >
< style  type ="text/css" > ...
<!--
.STYLE1 {...}{
    color: #FF0000;
    font-weight: bold;
}
-->
</ style >
</ head >

< body >
< form  id ="form1"  name ="form1"  method ="post"  action ="" >
   < label >< span  class ="STYLE1" > InputStar: </ span >
   < input  type ="text"  name ="InputStar"   />
   </ label >
   < label >
   < input  name ="SumbitStar"  type ="submit"  id ="SumbitStar"  value ="提交"  onclick ="javascript:showDetails(document.form1.InputStar)"    />
   </ label >
</ form >
</ body >
</ html >

通过定义两个数组关联

 

其它替换方法: