Button btn1_click is not executing-CodePudding

btn1_click is not functioning. There are no errors or warnings in Visual Studio 2017. There has to be something simple I am not doing. I am certain that my api site is correct.

  <!DOCTYPE html>
  <html>
  <head>
   <meta charset="utf-8" />
   <title>weatherjson</title>
   <style>
   body {
       position: fixed;
       top: 0px;
       bottom: 100%;
       height: 100%;
       left: 0px;
       right: 100%;
       width: 100%;
       background-color: green;
   }
    </style>
   </head>
   <body>
   <script type="text/javascript">
       function btn1_click() {
           fetch('https://api.openweathermap.org/data/2.5/onecall?lat=40.79&lon=-81.347&exclude=minutely&appid=94d45728ae0f1341c6c5b0527162f90d').then(response => response.json()).then((obj) => {
           TextArea1.value = obj;
        });
       }
   </script>
   <input id="Button1" type="button" value="get json" onclick="btn1_click()" />
   <textarea id="TextArea1" rows="200" cols="200"></textarea>
   </body>
   </html>

CodePudding user response：

There is nothing wrong with your button, but i think you want to show the data in the text area so the way to do that you have to write which properties you need to show , this is how it should looks like

function btn1_click() {
  fetch(
    "https://api.openweathermap.org/data/2.5/onecall?lat=40.79&lon=-81.347&exclude=minutely&appid=94d45728ae0f1341c6c5b0527162f90d"
  )
    .then((response) => response.json())
    .then((obj) => {
      TextArea1.value = `${obj.lat} ${obj.lon} ${obj.timezone} ${obj.current.dt}`;
    });
}

 body {
     position: fixed;
     top: 0px;
     bottom: 100%;
     height: 100%;
     left: 0px;
     right: 100%;
     width: 100%;
     background-color: green;
 }

 <input id="Button1" type="button" value="get json" onclick="btn1_click()" />
 <textarea id="TextArea1" rows="200" cols="200"></textarea>

To see which properties are available console.log(obj)