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

前提

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

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

実現したいこと

list内でも「text.innerHTML = 'おはようございます！' + at + '℃';」を実行できるようにしたい.


### 発生している問題・エラーメッセージ
エラーメッセージはありませんでした.

該当のソースコード

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><img class="text_img" src="C:\Users\kyosu\Pictures\CiLCiL\25度って何度だよ\img\pin.png">東京都港区</h3>
        <p>天気：〇<br>体感温度：〇℃</p>
      </li>
         
      <li>
        <img src="C:\Users\kyosu\Pictures\CiLCiL\25度って何度だよ\img\tokyo_minatoku.jpg">
        <h3><img class="text_img" src="C:\Users\kyosu\Pictures\CiLCiL\25度って何度だよ\img\pin.png">東京都港区</h3>
        <p>天気：〇<br>体感温度：〇℃</p>
      </li>
   
      <li>
        <img src="C:\Users\kyosu\Pictures\CiLCiL\25度って何度だよ\img\tokyo_minatoku.jpg">
        <h3><img class="text_img" src="C:\Users\kyosu\Pictures\CiLCiL\25度って何度だよ\img\pin.png">東京都港区</h3>
        <p>天気：〇<br>体感温度：〇℃</p>
      </li>
   
      <li>
        <img src="C:\Users\kyosu\Pictures\CiLCiL\25度って何度だよ\img\tokyo_minatoku.jpg">
        <h3><img class="text_img" src="C:\Users\kyosu\Pictures\CiLCiL\25度って何度だよ\img\pin.png">東京都港区</h3>
        <p>天気：〇<br>体感温度：〇℃</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%;
}

.text_img{
  width: 3%;
  height: 3%;
  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'])