无法获取搜索栏值赋值给API请求city变量的问题排查

代码无法正常运行是两个低级错误导致的：

• 变量作用域+执行时机错误：你在点击事件回调里用let声明的city是函数内部的局部变量，写在外面的fetch根本访问不到这个值。就算你把city提到全局设置默认值，只要fetch写在点击事件外部，页面加载时就会立刻执行请求，你后续点击按钮修改city的值也不会触发重新发请求，自然拿不到输入框对应城市的数据。
• URL参数拼接错误：你写的请求地址里用了&，这是HTML里的&转义字符，在JS字符串里直接写会导致API无法正确识别参数，JS里拼接参数直接用&即可。

把请求逻辑移到点击事件回调内部，点击按钮拿到输入值之后再发请求，参考实现代码：

// 提前配置好你的API密钥，确保变量能正常访问
const apik = "替换为你自己的WeatherAPI密钥";
// 提前绑定搜索按钮元素，替换成你实际的按钮获取逻辑
const searchBtn = document.getElementById("search-btn");

searchBtn.addEventListener("click", function(){
  // 点击触发时再获取搜索栏输入值，做简单去空格和判空
  const searchValue = document.getElementById("searchbar").value.trim();
  if (!searchValue) {
    alert("请输入要查询的城市名称");
    return;
  }

  // 拿到合法输入值后再发起请求
  fetch(`http://api.weatherapi.com/v1/forecast.json?key=${apik}&q=${searchValue}&days=7`)
    .then(response => response.json())
    .then(weatherData => {
      // 在这里写你拿到天气数据后的页面渲染逻辑
      console.log("查询到的天气数据：", weatherData);
    })
    .catch(error => {
      console.error("天气查询失败：", error);
    })
})

• 本地测试时如果出现跨域报错，不要直接双击打开HTML文件用file协议访问，用本地静态服务器启动项目，同时去WeatherAPI后台配置好你本地调试的域名白名单。
• 可以先在fetch前加一句console.log(searchValue)，确认点击时能正确拿到输入框的内容，再排查请求本身的问题。

内容的提问来源于stack exchange，提问作者Ali Azarpeykan