Javascript 带用户输入的API查询

我有一个表单，用户在其中键入城市名称，我想进行API调用，获取该城市的天气结果，然后在控制台中显示

我得到一个错误，因为出于某种原因，保存input.value的变量没有连接到字符串中

代码如下：

var请求；
var input1=document.getElementById（'city'）；
var-api='1〕https://api.openweathermap.org/data/2.5/weather?q=';
变量apikey='&APPID=433b12b793d7ebc17989745c069a540b'；
var sum=api+input1.value+apikey；
函数myFunction（）{
请求=新的XMLHttpRequest（）；
请求。打开（'GET'，sum，true）；
request.onload=函数（）{
var data=JSON.parse（this.response）；
如果（request.status>=200&&request.status<400）{
控制台日志（数据）；
}否则{
console.log（input1.value）；
}
}
request.send（）；
}
myFunction（input1.value）
您的代码没有问题，只需将所有内容放入函数中即可

 <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>


函数myFunction（）{
var请求；
var input1=document.getElementById（'city'）；
var-api='1〕https://api.openweathermap.org/data/2.5/weather?q=';
瓦阿皮基=
“&APPID=433b12b793d7ebc17989745c069a540b”；
var sum=api+input1.value+apikey；
请求=新的XMLHttpRequest（）；
请求。打开（'GET'，sum，true）；
request.onload=函数（）{
var data=JSON.parse（this.response）；
如果（request.status>=200&&request.status<400）{
控制台日志（数据）；
}否则{
console.log（input1.value）；
}
}
request.send（）；
}
这些变量初始化应该在函数内部。实际上，当页面第一次加载时，它们只运行一次。如果您记录
input1.value
正确的值会出现吗？