字典项目Bug修复：输入不存在词汇时无法显示‘未找到’提示

核心问题分析 #

你的代码存在两个关键逻辑错误：

1. 仅当搜索词汇完全匹配字典中的某个key时，才会执行description的赋值操作；如果词汇不在字典内，forEach循环里的代码根本不会触发，自然不会显示"Not found"。
2. if(searchKeyword === data[key])的判断逻辑完全错误——你拿搜索词和释义做对比，这和"无释义词汇"的判断需求完全不匹配。

修复后的代码 #

const txtBox = document.querySelector(".txtBox");
const form = document.querySelector(".searchForm");
const searchWord = document.querySelector(".search-word");
const description = document.querySelector(".description");
const dictionaryJson = "dictionary.json"; // 移除多余的反斜杠转义

function searchDict(e) {
  e.preventDefault();
  fetch(dictionaryJson)
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      let word = txtBox.value.trim();
      let searchKeyword = word.toUpperCase();
      
      // 重置页面内容，避免上次搜索结果残留
      searchWord.innerHTML = "";
      description.innerHTML = "";

      // 处理空输入场景
      if (!word) {
        description.innerHTML = "请输入要搜索的词汇";
        return;
      }

      // 直接检查词汇是否存在于字典中，比遍历更高效
      if (data.hasOwnProperty(searchKeyword)) {
        searchWord.innerHTML = searchKeyword;
        // 兼容词汇存在但释义为空的情况
        description.innerHTML = data[searchKeyword] || "Not found";
      } else {
        // 词汇不在字典内时显示提示
        searchWord.innerHTML = searchKeyword;
        description.innerHTML = "Not found";
      }
    });
}

form.addEventListener("submit", searchDict);

关键修复点说明 #

• 替换遍历为直接key检查：用data.hasOwnProperty(searchKeyword)直接判断词汇是否存在，既高效又能覆盖"词汇不存在"的场景。
• 添加内容重置逻辑：每次搜索前清空页面内容，避免旧结果干扰。
• 处理空输入：防止用户提交空内容时页面无反应。
• 修复路径错误：原代码中"\dictionary.json"的反斜杠是多余的，会导致资源请求失败，已移除。
• 兼容空释义场景：如果某个词汇存在但释义为空，同样显示"Not found"。

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