javascriptの勉強とhtmlの勉強とjsonの勉強でした。
参考サイト
https://anko.education/apps/weather_api
https://itsakura.com/js-selectbox
<DOCTYPE html>
<head>
<title>天気予報取得</title>
</head>
<body>
<h1>欲しい地域の天気予報情報を取得できます</h1>
<select name="region" id="selectregion1">
<option value="110000">埼玉県</option>
<option value="120000">千葉県</option>
<option value="130000">東京地方</option>
<option value="140000">神奈川県</option>
</select>
<input type="button" value="天気予報検索" onclick="forcast()">
<p id="wea1" ></p>
<p id="wea2" ></p>
<p id="wea3" ></p>
<p id="wea4" ></p>
<p id="wea5" ></p>
<script>
function forcast(){
const str = document.getElementById("selectregion1").value;
let url = "https://www.jma.go.jp/bosai/forecast/data/forecast/";
url2 = url + str + ".json"
fetch(url2)
.then(function(response) {
return response.json();
})
.then(function(weather) {
console.log(weather);
document.getElementById("wea1").innerHTML = weather[0].publishingOffice;
document.getElementById("wea2").innerHTML = weather[0].reportDatetime;
let areas1 = weather[0].timeSeries[0].areas[0];
document.getElementById("wea3").innerHTML = areas1.area.name;
document.getElementById("wea4").innerHTML = areas1.weathers[0];
document.getElementById("wea5").innerHTML = areas1.weathers[1];
});
}
</script>
</body>
</html>