XMLHttpRequest and Fetch not functioning-CodePudding

So I am working on my first project that uses JavaScript with HTML, its a basic weather webpage. The user inputs their location and it displays the current weather. Got the HTML working smoothly but the JavaScript keeps stuffing up. The weird part is that there are no errors in the console so it should be working just fine.

Here is the part of the HTML:

<section id="weather">
            <div id="nav">
                <div id="locate">
                    <div id="container">
                        <form id="location-form">
                            <label for="location">Location (eg. London,uk):</label>
                            <input type="text" id="location" name="location" required>
                            <button type="submit" form="location-form" formnovalidate>Let's Go!</button>
                        </form>
                    </div>
                </div>
                <div id="weather-output">
                 <!-- Output of API goes here -->
                    
                </div>
            </div>
</section>

Here is my JavaScript. I have embedded it using script tags because it wasn't detecting button presses.

<script type="text/JavaScript">
        function fetchAPIData() {
         const locationInput = document.getElementById("location");
         const locationValue = locationInput.value;
         const url = `http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API_URL`;
         // do the URL Request
         async function xmlrequest() {
             var xhttp = new XMLHttpRequest();
             xhttp.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
                // Typical action to be performed when the document is ready:
                document.getElementById("weather-output").innerHTML = xhttp.responseText;
               }
             };
             xhttp.open("GET", url, true);
             xhttp.send();
            }
         xmlrequest(); 
        }
        //listens for button on html side and runs fetchAPIData()
        document.addEventListener("DOMContentLoaded", () => {
         document.querySelector("button[type=submit]").addEventListener("click", fetchAPIData);
      
        }
        );
</script>

I have tried it with both XMLHttpRequest (shown above) and Fetch. Neither work, they do not function nor displayed errors. I am using OpenWeatherMap I have an API key and it works as a plain url but when it the script it doesn't. Any help would be amazing!

mrt

Edit: Firebase analytics is working, its status code is '200'. There are not any status codes nor error messages for the API though.

CodePudding user response：

Solution 1

The problem is that you wrote type of button as "submit":

<button type="submit" form="location-form" formnovalidate>Let's Go!</button>

Try type="button":

<button type="button" form="location-form" formnovalidate>Let's Go!</button>

and amend js:

document.querySelector("button[type=button]").addEventListener("click", fetchAPIData);

Solution 2

use e.preventDefault() function:

function fetchAPIData(e) {
         e.preventDefault();
         const locationInput = document.getElementById("location");
         const locationValue = locationInput.value;
         .....

CodePudding user response：

In addition to what James wrote fetch with async/await should still be the way forward here.

A basic (contrived) example:

// Make this function async
async function fetchAPIData() {

  // Get the value from your input
  const { value } = locationInput;

  const endpoint = `http://api.openweathermap.org/data/2.5/weather?q=${value}&APPID=API_URL`;

  // Await the response
  const response = await fetch(endpoint);

  // If it's ok parse the data and update the DOM
  // otherwise throw an error
  if (response.ok) {
    const data = await response.json();
    output.innerHTML = data;
  } else {
    throw new Error('Bad response');
  }

}