<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<title>阪急京都線運賃計算</title>
<script src="fare.js"></script>
<style>
table,th,td{
border:1px solid black;
}
table{
border-collapse:collapse;
}
</style>
</head>
<body>
<h1>阪急京都線運賃計算</h1>
<form name="fare" id="fare">
<fieldset style="width:10em;box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0">
<legend>大人／子ども</legend>
<!--大人子どもを選択したら料金計算fare_culc()☆-->
<input type="radio" name="is_adult" value="yes" id="is_adult_yes" checked >大人
<input type="radio" name="is_adult" value="no" id="is_adult_no">子ども
</fieldset>
<fieldset style="width:10em;box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0">
<legend>発着駅</legend>
<!--駅を選択したら料金計算fare_culc()☆-->
出発:<select name="start" id="start">
<script>
for(var station in stations){
document.write('<option value="' + station + '">' + station + '</option>');
}
</script>
</select><br>
<!--駅を選択したら料金計算fare_culc()☆-->
到着:<select name="end" id="end">
<script>
for(var station in stations){
document.write('<option value="' + station +'">' + station + '</option>');
}
</script>
</select>
</fieldset>
<p><button type="reset" id="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"></p>
<p id="payment"></p>
</div>
</body>
</html>