API query with user input

Question

I have a form where user types in the city name, I want to make an API call and get weather results in that city and then display it in the console.

I'm getting an error because for some reason the variable that holds input.value is not being concatenated into the string.

Here's the code:

var request;
var input1 = document.getElementById('city');
var api = 'https://api.openweathermap.org/data/2.5/weather?q=';
var apikey = '&APPID=433b12b793d7ebc17989745c069a540b';
var sum = api + input1.value + apikey;

function myFunction() {

  request = new XMLHttpRequest();

  request.open('GET', sum, true);
  request.onload = function() {

    var data = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
      console.log(data);
    } else {
      console.log(input1.value);
    }
  }

  request.send();
}
myFunction(input1.value);

<input id='city' value='San Francisco'>

Thanks for any help!

Those variable initializations should be inside the function. As it is, they'll just run once when the page first loads. — Pointy
– Pointy, Commented Sep 2, 2018 at 13:23

Danijel · Accepted Answer · 2018-09-02 13:25:59Z

1

Your code is ok, you just need to put everything inside the function.

 <script>
    function myFunction() {

        var request;
        var input1 = document.getElementById('city');
        var api = 'https://api.openweathermap.org/data/2.5/weather?q=';
        var apikey =
            '&APPID=433b12b793d7ebc17989745c069a540b';
        var sum = api + input1.value + apikey;

        request = new XMLHttpRequest();

        request.open('GET', sum, true);
        request.onload = function () {

            var data = JSON.parse(this.response);
            if (request.status >= 200 && request.status < 400) {
                console.log(data);
            } else {
                console.log(input1.value);
            }
        }

        request.send();
    }
</script>

answered Sep 2, 2018 at 13:25

Danijel

1,1858 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

API query with user input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related