jQuery计算器根据计算结果奇偶/0值切换对应颜色的实现问题

核心问题梳理 #

• 判断对象错误：原有代码对运算符（+/-/x/）做奇偶判断，而非实际计算结果
• 缺少0值优先判断逻辑：0属于偶数，不优先判断会直接触发偶数的红色样式
• 语法错误：else(value % 2 == 1)写法不符合JS语法规范
• 除法未做兼容：除法会产生小数，奇偶判断无意义，补充取整处理

完整修复代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    body {
      background-color: #0D1112;
    }
    form {
      display: flex;
      height: 30px;
      gap: 30px;
      align-items: center;
      justify-content: center;
      margin-top: 50px;
    }
    p {
      color: white;
      text-align: center;
      font-size: 24px;
      padding: 10px;
    }
    h1 {
      color: white;
      text-align: center;
    }
    #svar {
      background-color: #0D1112;
      margin-top: 50px;
    }
    h4 {
      color: white;
      text-align: center;
      margin: 8px 0;
    }
  </style>
</head>
<body>
  <form id="f0rm">
    <input name="nummer1" id="nummer1" type="text" size="5">
    <select id="dropDown" name="thing">
      <option value="choose">choose</option>
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="x">x</option>
      <option value="/">/</option>
    </select>
    <input name="nummer2" id="nummer2" type="text" size="5"> =
    <input type="button" id="calculator" value="Submit">
  </form>
  <div id="svar">
    <p>Your answer is...</p>
    <h4>Blue = odd answer</h4>
    <h4>Red = even answer</h4>
    <h4>Yellow = your answer is just 0</h4>
  </div>
  <script>
    $(function() {
      $('#calculator').click(function() {
        const operator = $("#dropDown").val();
        const num1 = parseInt($("#nummer1").val());
        const num2 = parseInt($("#nummer2").val());
        let result;
        // 合法性校验
        if (operator === 'choose' || isNaN(num1) || isNaN(num2)) {
          $("#svar p").text('请输入有效数字并选择运算符').css('background-color', 'transparent');
          return;
        }
        // 运算逻辑
        switch(operator) {
          case '+':
            result = num1 + num2;
            break;
          case '-':
            result = num1 - num2;
            break;
          case 'x':
            result = num1 * num2;
            break;
          case '/':
            // 除法默认取整，避免小数无法判断奇偶
            result = Math.floor(num1 / num2);
            break;
        }
        // 赋值结果
        $("#svar p").text(result);
        // 颜色逻辑 优先判断0
        if (result === 0) {
          $("#svar p").css('background-color', 'yellow');
        } else if (result % 2 === 0) {
          $("#svar p").css('background-color', 'red');
        } else {
          $("#svar p").css('background-color', 'blue');
        }
      });
    });
  </script>
</body>
</html>

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