Flask网页计算器error-state样式不生效问题求助

核心问题分析 #

你的代码存在两个关键问题导致error-state无法正常工作：

1. CSS选择器优先级不足，.error-state样式被.info-box默认样式覆盖
2. Fetch API未正确处理HTTP错误响应（仅网络错误才触发catch，后端返回的无效输入错误不会进入catch块）

解决方案 #

1. 提升error-state样式优先级 #

修改CSS中的.error-state选择器，通过组合类选择器提高权重，确保能覆盖.info-box的默认样式：

/* 替换原来的.error-state */
.info-box.error-state {
    background-color: #B70F0A;
    color: #FFFFFF;
}

2. 修正Fetch错误处理逻辑 #

Fetch的catch仅在网络请求失败时触发，后端返回的HTTP错误状态码（如400）不会自动进入catch。需要在then中主动检查响应状态：

function calculate(operation) {
  var form = document.getElementById("calculator-form");
  var formData = new FormData(form);
  formData.append('operation', operation);

  fetch('/calculate', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    // 检查响应是否成功（状态码2xx）
    if (!response.ok) {
      throw new Error('Invalid input');
    }
    return response.text();
  })
  .then(data => {
    var resultText = formData.get('num1') + ' ' + operation + ' ' + formData.get('num2') + ' = ' + data;
    document.getElementById('result').innerText = 'Result: ' + resultText;
    document.getElementById('error').innerText = '';
    document.getElementById('info-box').innerText = resultText;
    document.getElementById('info-box').className = 'info-box start-state';
  })
  .catch(error => {
    document.getElementById('result').innerText = '';
    document.getElementById('error').innerText = 'Error: ' + error.message;
    document.getElementById('info-box').innerText = 'Invalid input';
    document.getElementById('info-box').className = 'info-box error-state';
  });
}

3. 完善Clear按钮样式恢复逻辑 #

原clearInputs仅移除error-state类，未确保恢复到默认start-state样式，修改为：

function clearInputs() {
    document.getElementById('num1').value = '';
    document.getElementById('num2').value = '';
    document.getElementById('result').innerText = '';
    document.getElementById('error').innerText = '';
    document.getElementById('info-box').innerText = 'Enter value(s) below and select an operation.';
    document.getElementById('info-box').className = 'info-box start-state';
}

4. Flask后端配合（必要） #

确保后端在收到无效输入时返回HTTP错误状态码，比如：

from flask import Flask, request, make_response

app = Flask(__name__)

@app.route('/calculate', methods=['POST'])
def calculate():
    num1 = request.form.get('num1')
    num2 = request.form.get('num2')
    operation = request.form.get('operation')

    try:
        num1 = float(num1)
        if num2 and num2.strip():
            num2 = float(num2)
        # 执行计算逻辑...
        # 示例：根据operation计算结果
        result = 0
        # 此处替换为你的计算代码
        return str(result)
    except ValueError:
        # 返回400错误状态码，触发前端错误处理
        return make_response("Invalid input", 400)

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