关于恢复display:none元素显示及斐波那契计算功能的技术咨询

原代码里的核心问题 #

• 未传递输入值给后端：当前fetch请求的URL没有携带用户输入的数值，后端无法获取计算参数
• 加载状态管理不全：仅在点击时显示loader，请求结束后未隐藏，会一直处于加载状态
• 缺少输入校验逻辑：没有判断输入值是否大于50，也没有对应的错误提示
• 结果赋值错误：data.clcInput.value是错误写法，应该使用后端返回的计算结果字段
• 未处理请求异常：没有捕获网络错误或后端返回的错误状态，用户无法得知请求失败情况

修正后的完整代码 #

const clcBtn = document.getElementById("calcButton");
const clcInput = document.getElementById("calcInput");
const result = document.getElementById('paragraph');
const loader = document.getElementById('spinner');

clcBtn.addEventListener("click", calcFunc);

function calcFunc() {
  // 清空之前的结果或错误提示
  result.innerHTML = '';
  // 获取输入值并转为整数，去除前后空格
  const inputValue = parseInt(clcInput.value.trim(), 10);

  // 本地输入校验：非数字或大于50直接提示错误
  if (isNaN(inputValue) || inputValue > 50) {
    result.innerHTML = '<span style="color: red;">错误：请输入不大于50的正整数</span>';
    return;
  }

  // 显示加载动画
  loader.classList.add("display");

  // 将输入值拼接到请求URL，传递给后端
  fetch(`http://localhost:5050/fibonacci/${inputValue}`)
    .then(response => {
      // 处理后端返回的错误状态码
      if (!response.ok) {
        throw new Error('后端计算失败');
      }
      return response.json();
    })
    .then(data => {
      // 展示后端返回的计算结果（假设后端返回字段为result，需根据实际接口调整）
      result.innerHTML = `斐波那契计算结果：${data.result}`;
    })
    .catch(error => {
      // 捕获网络或后端错误并提示
      result.innerHTML = `<span style="color: red;">出错了：${error.message}</span>`;
    })
    .finally(() => {
      // 无论请求成功/失败，最终隐藏加载动画
      loader.classList.remove("display");
    });
}

关键改动说明 #

• 输入值传递：通过模板字符串将输入值拼接到fetch请求URL中，确保后端能接收计算参数
• 加载状态控制：使用finally方法，保证请求完成后一定会隐藏loader，避免持续加载
• 输入校验：先在本地完成合法性判断，不合法直接提示，无需发起无效请求
• 异常处理：覆盖网络错误和后端错误场景，给用户明确的错误提示
• 结果展示：根据后端实际返回的结果字段调整赋值逻辑，替换原错误的写法

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