document.getElementById(' ').value 返回未定义

Question

我正在为天气应用程序使用 API。但是当涉及到使用 a<input type="text">和 a创建搜索栏时document.getElementById(' ').value，它会返回未定义的（当我注销时）。所以我想知道是否有任何其他方式来获取输入。HTML:<form class="search">     <input type="text" id="Search" name="Search" placeholder="Search city..." style="width: 50%; padding: 10px;">     <button type="submit" id="button" style="padding: 10px;">SEARCH</button></form>脚本：let location1 = document.getElementById('Search').value;let api1 = 'http://api.openweathermap.org/data/2.5/weather?q=';let api2 = '&appid=ece23eaa3a8d940b327a0cdc41c1e344&units=metric';let API = api1 + location1 + api2;// MAIN WEATHER */fetch(API) // Current weather API任何帮助将不胜感激

Answer 1

问题是我设置了一个按钮，该按钮的功能是重新加载页面。我的教授告诉我的解决方案是将整个 JS 代码设置为一个函数。当按下按钮时激活该功能。我在这里留下工作代码：

HTML

<form class="search">

            <input type="text" id="Search" name="Search" placeholder="Search city..." style="width: 50%; padding: 10px;">   

            <button type="button" id="button" style="padding: 10px;" onclick="find_weather()" >SEARCH</button>

         

</form>

JS

let find_weather= function(){

        let location1 = document.getElementById('Search').value;

        let api1 = 'http://api.openweathermap.org/data/2.5/weather?q=';

        let api2 = '&appid=ece23eaa3a8d940b327a0cdc41c1e344&units=metric';

    

        let api3 = 'http://api.openweathermap.org/data/2.5/forecast?q=';

        let api4 = '&appid=ece23eaa3a8d940b327a0cdc41c1e344&units=Metric';

        

        let API = api1 + location1 + api2;

        let API2 = api3 + location1 + api4;

        

        fetch(API).then(response => response.json())

        ...