如何修改代码让Fetch请求携带输入框的Pokemon ID或名称？

原代码有两个核心问题导致请求不符合预期：

1. 模板字符串语法错误：把变量插值的$写成了&，无法正确将Pokemon编号/名称拼接到URL中；
2. 输入框值获取时机错误：页面加载时就获取了输入框值，后续用户修改输入内容后，函数仍用旧值发起请求。

修改后的代码 #

var baseUrl = "https://pokeapi.co/api/v2/pokemon/";

function fetchPokemon(){
    // 每次调用函数时才获取最新的输入框内容
    var pokemonIdOrName = document.getElementById('pokemon_id').value.trim();
    // 避免空值发起无效请求
    if (!pokemonIdOrName) {
        console.log("请输入Pokemon编号或名称");
        return;
    }
    // 正确拼接请求URL
    fetch(`${baseUrl}${pokemonIdOrName}`)
    .then(response => {
        if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("获取Pokemon数据出错：", error);
    });
}

// 建议绑定按钮点击触发，而非页面加载时直接调用（此时输入框大概率为空）
// document.getElementById('fetch-btn').addEventListener('click', fetchPokemon);

关键修改说明 #

• 修正模板字符串：将错误的${baseUrl}&{pokemonid}改为${baseUrl}${pokemonIdOrName}，确保请求路径正确拼接编号/名称；
• 延迟获取输入值：把输入框取值逻辑移到函数内部，保证每次调用都能拿到用户最新输入的内容；
• 增加基础校验：判断输入是否为空，避免发起无意义的请求；
• 添加错误处理：捕获请求失败的情况，方便排查问题（比如输入了不存在的编号/名称）。

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