JS・innerHTMLが表示されない...

前提

天気予報を表示させるプログラムを書いています.

最終的にリスト内に「text.innerHTML = 'おはようございます！' + at + '℃';」を表示させたいのですが, なぜか表示されません.

発生している問題・エラーメッセージ

pra.js:17 TypeError: Cannot read properties of undefined (reading 'temp')
at fetchURLs (pra.js:8:34)


### 該当のソースコード
HTML, JavaScript, CSS
```ここに言語名を入力
【HTML】
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
  <script src="pra.js"></script>
  <link rel="stylesheet" href="pra.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>

<body>
  <h1 id="text"></h1>
  <div>
    <ul>
      <li>
        <img src="C:\Users\kyosu\Pictures\CiLCiL\25度って何度だよ\img\tokyo_minatoku.jpg">
        <h3>スプリング</h3>
        <h1 id="text"></h1>
        <p>春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。</p>
      </li>
         
      <li>
        <img src="http://sedoriplan.com/sample/css/images/012/summer.jpg">
        <h3>サマー</h3>
        <p>春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。</p>
      </li>
   
      <li>
        <img src="http://sedoriplan.com/sample/css/images/012/fall.jpg">
        <h3>オータム</h3>
        <p>春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。</p>
      </li>
   
      <li>
        <img src="http://sedoriplan.com/sample/css/images/012/winter.jpg">
        <h3>ウインター</h3>
        <p>春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。</p>
      </li>
    </ul>
  </div>

</body>
</html>


【CSS】
* {margin: 0; padding: 0;}
 
div {
  width: 80%;
  margin: 0 auto;
  max-width: 500px;
  margin-top: 100px;
}
 
ul {
	list-style: none;
  width: 500px;
}
 
img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-right: 3%;
}

h3 {
	font-weight: bold;
	margin-bottom: 10px;
}
 
li img {
  float: left;
  margin: 0 15px 0 0;
}
 
li p{
	font-size: 13px;
	line-height: 1.4;
}
 
li {
  padding: 10px;
  overflow: auto;
}
 
li:hover {
  background: #eee;
  cursor: pointer;
}

【JavaScript】
var date = new Date();
const alltime = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) +('0' + date.getDate()).slice(-2) + ('0' + date.getHours()).slice(-2) + 0+0+0+0

async function fetchURLs(urls) {
    try {
        const fetchUrls = urls.map(url => fetch(url).then(res => res.json()))
        const [todo1] = await Promise.all(fetchUrls)
        const k = todo1["11001"].temp[0]
        const s = todo1["11001"].humidity[0]
        const v = todo1["11001"].wind[0]
        const a = 1.76 + 1.4*v**0.75
        const t = 37 - (37 - k)/(0.68 - 0.0014*s + a**-1) - 0.29*k*(1- s/100)
        const at = Math.round(t*10)/10 ;
        const text = document.getElementById('text');
        text.innerHTML = 'おはようございます！' + at + '℃';
      } catch (error) {
          console.error(error)
      }
    }
    fetchURLs(['https://www.jma.go.jp/bosai/amedas/data/map/' + alltime + '.json'])

試したこと

div内に「<h1 id="text"></h1>」を置いているのがダメなのかと思い, 外に置いてみましたが, 同様に表示されませんでした.

このリストを置く前はうまく表示できていました.

行動規範の内容に同意します

回答1件

エラーメッセージをよく読みましょう。

tempプロパティを参照しようとして失敗している、ということは、エラー箇所は当該プロパティを読もうとしているconst k = todo1["11001"].temp[0]のところで、HTML出力を行う以前の問題と思われます。

投稿2022/09/23 03:26

maisumakun

総合スコア145184

GYMON

2022/09/23 04:16

ですが, リストを書く前にはうまくいったんです. どこをどう変えればよいのか教えていただけませんでしょうか.

GYMON

2022/09/23 04:18

先ほど, もう一度実行してみたところ, div{}外の<h1 id="text"></h1>は表示されていました. リストに入れたから表示されないようです. 原因がわかれば教えていただきたいです...

maisumakun

2022/09/23 04:52

> どこをどう変えればよいのか教えていただけませんでしょうか. まずは、得られているデータが正しいのか確認してみましょう。

GYMON

2022/09/23 06:18

原因を調べてみたところ, KDDIの通信障害によるアメダス気象データの不具合でした. 数時間前のデータと比べ, 現時間のアメダスデータが現在表示させようとしているデータ含め多くが送信されておりませんでした. これが, tempが時間によって"定義されていない"とされる理由と思いました. それはともかく, div内のtext.innerHTML = 'おはようございます！' + at + '℃'; が実行されない理由がわかりません. div id="list" としてconst text = document.getElementById('list'.'text');と一応書いてみましたが, うまくいきません. 場所仕手方法がよくわからないので, わかれば教えてほしいです.

maisumakun

2022/09/23 10:41

JavaScriptを<head>内で読み込むと、<body>の中身が出来上がる前に実行されてしまうことがあります。 DOMContentLoadedで実行を行う、あるいは<script>を<body>末尾に回すなどしてみてはどうでしょうか。

行動規範の内容に同意します