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>JSlet 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())        ...