<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<title>阪急京都線駅間距離</title>
<style>
table,th,td{
border:1px solid black;
}
table{
border-collapse:collapse;
}
</style>
<script>
//営業キロ計算
function culc(){
var start = parseFloat(document.getElementById('start').value);
var end = parseFloat(document.getElementById('end').value);
var distance = end - start;
if(distance < 0){
distance = -distance;
}
var distance_output = document.getElementById("distance");
distance_output.innerHTML = '距離:' + distance + '営業キロ';
document.getElementById('result').style.display ='';
}
//出力結果部分を最初は隠す
function button_reset(){
document.getElementById('result').style.display ='none';
}
//梅田からの営業キロ
var stations = {
'梅田' : 0,
'十三' : 2.4,
'南方' : 4.3,
'崇禅寺' : 5.6,
'淡路' : 6.6,
'上新庄' : 8.7,
'相川' : 9.6,
'正雀' :11.8,
'摂津市' :13.3,
'南茨木' :15.3,
'茨木市' :17.2,
'総持寺' :18.6,
'富田' :19.7,
'高槻市' :23.0,
'上牧' :27.3,
'水無瀬' :28.1,
'大山崎' :30.1,
'西山天王山' :32.6,
'長岡天神' :34.1,
'西向日' :36.0,
'東向日' :37.4,
'洛西口' :38.7,
'桂' :40.4,
'西京極' :42.5,
'西院' :44.3,
'大宮' :45.7,
'烏丸' :48.6,
'河原町' :47.7
};
</script>
</head>
<body onLoad="document.getElementById('result').style.display ='none';">
<h1>阪急京都線駅間距離</h1>
<form name="fare" id="fare">
<fieldset style="width:10em;box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0">
<legend>発着駅</legend>
出発:<select name="start" id="start" onChange="culc()">
<script>
//発駅をフォームとして出力☆
for(var station in stations){
document.write('<option value="' + stations + '">' + stations + '</option>');
}
</script>
</select><br>
到着:<select name="end" id="end" onChange="culc()">
<script>
//着駅をフォームとして出力☆
for(var station in stations){
document.write('<option value="' + station +'">' + stations[station] + '</option>');
}
</script>
</select>
</fieldset>
<p><button type="reset" onClick="button_reset()">リセット</button></p>
</form>
<div id="result" style="width:15em;padding:0.1em 1em;box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0">
<p id="distance">a</p>
</div>
</body>
</html>