Change color based on even / odd answer-CodePudding

My problem is that I'd like the color to switch depending on what the value is, either odd, even or just 0. I've search on stackoverflow for some answers but none really helped.. So, if the answer is odd, the color shall be blue. If the answer is even, the color shall be red. If the answer is 0, the color shall be yellow.

Any clues that could help me keep going?

<!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;
    }
    
    p {
      color: white;
    }
    
    h1 {
      color: white;
      text-align: center;
    }
    
    #svar {
      background-color: #0D1112;
    }
    
    h4 {
      color: white;
    }
  </style>
</head>

<body>

  <form id="f0rm">
    <input name="nummer1" id="nummer1" type="text" size="5">
    <select id="dropDown" name="thing" id="dropID">
      <option>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() {
        var value = $("#dropDown").val();
        var number1 = $("#nummer1").val();
        var number2 = $("#nummer2").val();
        var int1 = parseInt(number1);
        var int2 = parseInt(number2);
        if (value === " ") $("#svar p").text(int1   int2);
        else if (value === "-") $("#svar p").text(int1 - int2);
        else if (value === "/") $("#svar p").text(int1 / int2);
        else if (value === "x") $("#svar p").text(int1 * int2);

        if (value % 2 == 0)
          $("#svar p").css("background-color", "red")

        else(value % 2 == 1)
        $("#svar p").css("background-color", "blue")

      });

    });
  </script>


</body>

</html>

CodePudding user response：

Just debugged your code a little bit

<!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;
    }
    
    p {
      color: white;
    }
    
    h1 {
      color: white;
      text-align: center;
    }
    
    #svar {
      background-color: #0D1112;
    }
    
    h4 {
      color: white;
    }
  </style>
</head>

<body>

  <form id="f0rm">
    <input name="nummer1" id="nummer1" type="text" size="5">
    <select id="dropDown" name="thing" id="dropID" required>
      <option>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() {
        var value = $("#dropDown").val();
        var number1 = $("#nummer1").val();
        var number2 = $("#nummer2").val();
        var int1 = parseInt(number1);
        var int2 = parseInt(number2);
          
        let result = 0;
        
        if (value === " ") result = int1   int2;
        else if (value === "-") result = int1 - int2;
        else if (value === "/") result = int1 / int2;
        else if (value === "x") result = int1 * int2;
        
        $("#svar p").text(result)

        if (result % 2 == 0){
          $("#svar p").css("background-color", "red");
        } else {
          $("#svar p").css("background-color", "blue");
        }
      });

    });
  </script>


</body>

</html>