无法将搜索框输入内容传入API完成搜索的问题求助

你代码的问题主要出在以下几点：

• 输入框取值时机错误：你在页面初始化时就获取了.meal的输入值，此时用户还没输入内容，点击搜索时传的永远是初始的空值，需要把取值逻辑移到点击事件回调内部。
• 变量未声明：sodium、calories没有用let/const声明，非严格模式下会污染全局作用域，严格模式下直接抛出报错。
• 输出内容硬编码：不管用户搜索的是什么食物，输出文案都写死了汉堡相关内容，和实际查询值不匹配。
• 没有处理空结果场景：如果API返回的items是空数组，页面不会有任何反馈，用户不知道查询失败。
• 输入内容未编码：如果用户输入包含特殊字符、空格，直接拼接URL会导致请求格式错误，需要用encodeURIComponent处理输入值。

修复后的代码如下：

const button = document.querySelector('.btnSearch');
const result = document.querySelector('.result');

button.addEventListener('click', () => {
  // 点击时再获取最新的输入值
  const meal = document.querySelector('.meal').value.trim();
  // 判空处理，避免发送无意义的空请求
  if (!meal) {
    result.textContent = '请输入要查询的食物名称';
    return;
  }

  fetch("https://calorieninjas.p.rapidapi.com/v1/nutrition?query=" + encodeURIComponent(meal), {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "e821fb4e26msh04940ae5c944c46p163856jsn483ba8870ffe",
        "x-rapidapi-host": "calorieninjas.p.rapidapi.com"
    }
  })
  .then(response => {
        return response.json();
    })
   .then(data => {
        const arrayItems = data.items || [];
        if (arrayItems.length === 0) {
          result.textContent = '未查询到该食物的营养信息';
          return;
        }
        // 取第一条查询结果展示，如有展示多条的需求可以自行调整拼接逻辑
        const item = arrayItems[0];
        const sodium = item.sodium_mg;
        const calories = item.calories;
        result.textContent = `每份${meal}含有钠${sodium}mg，热量${calories}千卡`;
    })
    .catch(err => {
        console.error(err);
        result.textContent = '查询失败，请稍后重试';
    });
});

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