如何从input元素取值并在异步fetch中动态使用？遇404问题求助

你的代码存在几个关键问题，导致无法正常获取单词释义，以下是修复后的完整代码和问题说明：

核心问题分析 #

1. 顶层await使用错误：在非模块脚本环境下，直接在顶层作用域使用await getWord()会触发语法错误，浏览器仅支持在type="module"的脚本中使用顶层await。
2. 按钮事件逻辑错误：点击按钮时直接跳转首页，完全没有触发获取单词的查询逻辑。
3. HTTP错误未捕获：fetch仅在网络故障时进入catch块，像404这类HTTP状态码错误不会自动触发异常，需要手动校验响应状态。
4. 初始化调用时机错误：页面加载时就调用getWord()，此时输入框为空，会请求空单词的API，必然返回404。

修复后的完整代码 #

const meaning = document.querySelector("#meaning");
const button = document.querySelector("#button");
const searchInput = document.querySelector("#search");

// 绑定按钮点击事件，触发单词查询
button.addEventListener('click', async (event) => {
    // 若按钮是表单提交按钮，阻止默认跳转行为
    event.preventDefault();
    const wordData = await getWord();
    if (wordData) {
        displayMeaning(wordData);
    }
});

async function getWord() {
    const searchTerm = searchInput.value.trim();
    // 校验输入是否为空
    if (!searchTerm) {
        alert("Please enter a word");
        return null;
    }
    const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${searchTerm}`;
    try {
        const response = await fetch(url, { method: "GET" });
        // 手动检查HTTP响应状态
        if (!response.ok) {
            throw new Error(`Request failed with status: ${response.status}`);
        }
        const jsonData = await response.json();
        console.log(jsonData);
        return jsonData;
    } catch (error) {
        alert("Please enter the correct word");
        console.error(error);
        return null;
    }
}

// 将API返回的释义渲染到页面
function displayMeaning(wordData) {
    // 清空之前的内容
    meaning.innerHTML = '';
    // 遍历数据生成HTML
    wordData.forEach(entry => {
        const wordTitle = document.createElement('h3');
        wordTitle.textContent = entry.word;
        meaning.appendChild(wordTitle);
        
        entry.meanings.forEach(meaningItem => {
            const partOfSpeech = document.createElement('p');
            partOfSpeech.innerHTML = `<strong>词性:</strong> ${meaningItem.partOfSpeech}`;
            meaning.appendChild(partOfSpeech);
            
            meaningItem.definitions.forEach(def => {
                const definition = document.createElement('li');
                definition.textContent = def.definition;
                meaning.appendChild(definition);
            });
        });
    });
}

关键修复点说明 #

• 将getWord()的调用移至按钮点击事件内，确保仅在用户主动查询时发起API请求。
• 添加输入内容校验，避免空值请求导致的无效API调用。
• 通过response.ok校验HTTP状态，将404等错误纳入异常处理逻辑，确保用户能收到正确提示。
• 新增displayMeaning函数，将API返回的结构化数据渲染到页面的#meaning元素中。
• 移除按钮点击时的页面跳转逻辑，替换为查询操作。

内容的提问来源于stack exchange，提问作者Jeya-rosini