APIの導入について

Question

前提・実現したいこと

ruby on railsでAPIのopen weather mapを導入し、天気の表示を行っています。
ページ内にあるボタン（id="text-button"）を押すと天気が表示されるようにしたいです。

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

現在の状況では、一度ページをリロードしないと、天気が表示がされません。

該当のソースコード

window.addEventListener('load', function(){
 var button = document.getElementById("text-button")
  
  button.onclick = function() {
    var request = new XMLHttpRequest();
   var API_KEY = process.env.OPEN_WEATHER_MAP_API
   request.open("GET", "http://api.openweathermap.org/data/2.5/weather?id=1850147&lang=ja&units=metric&APPID="+API_KEY, true);
    request.responseType = 'json'
    request.send();

   request.onload = function (){
  
   var data = this.response;

   var img = document.createElement('img');

   img.src = "http://openweathermap.org/img/w/"+data.weather[0].icon+".png";

   img.alt = data.weather[0].main;

   var temperature = Math.floor(data.main.temp) ;

   var weather = data.weather[0].description;

   document.getElementById('weather').innerHTML = weather;

   document.getElementById('icon').appendChild(img);

   document.getElementById('temp').innerHTML = "気温："+ temperature + "℃";

   }
  };
  
})



```html

```<p>
  <span id="area" >東京の現在の天気</span>
</p>

<p>
  <span id="weather" ></span>
</p>

<p>
  <span id="icon" ></span>
</p>

<p>
  <span id="temp" ></span>
</p>

<input type="submit" value="天気を見る", id = "text-button">

試したこと

.onclick イベントを追加して上記のような実装をしましたが、一度リロードボタンを押さないといけないことに変わりはありませんでした。

補足情報（FW/ツールのバージョンなど）

rails', '~> 6.0.0'

Answer 1

イベントハンドラが動いているかどうか、alertを仕込んで確かめてみてください。

動いていないとしたら、以下のように変更すると動くかもしれません。
（外していたらごめんなさい）

document.addEventListener("turbolinks:load", function(){
（略）
}

Answer 2

ページ内にあるボタン（id="text-button"）を押した時の処理の最後にページをリロードする処理も一緒に組み込んではどうでしょうか？

.......
.......
  var weather = data.weather[0].description;

     document.getElementById('weather').innerHTML = weather;
     document.getElementById('icon').appendChild(img);
     document.getElementById('temp').innerHTML = "気温："+ temperature + "℃";

     location.reload();   // ページをリロードする処理
   }
};

↓参考ページ↓
https://stackoverflow.com/a/3715053/11242567