<DOCTYPE html>
<head>
<title>都道府県の市町村取得 API</title>
<style>
h1 { color: #f37053; }
#wea1 { color: #f37053; }
</style>
</head>
<body>
<h1>市町村情報取得を取得できます</h1>
<select name="region" id="selectregion1">
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="千葉県">千葉県</option>
<option value="埼玉県">埼玉県</option>
</select>
<input type="button" value="市町村情報取得" onclick="forcast()">
<p id="wea1" ></p>
<p id="wea2" ></p>
<script>
function forcast(){
const str = document.getElementById("selectregion1").value;
let url = "https://geoapi.heartrails.com/api/json?method=getCities&prefecture=";
url2 = url + str
fetch(url2)
.then(function(response) {
return response.json();
})
.then(function(region) {
//console.log(region);
var count = Object.keys(region.response['location']).length;
console.log(count);
for ( i=0; i < count; i++) {
document.getElementById("wea1").innerHTML = region.response.location[i].city;
document.getElementById("wea2").innerHTML = region.response.location[i].city_kana;
}
});
}
</script>
</body>
</html>
