javascript calculator input background

Question

Hi just out of educational purpose im trying to do a few things with my calculator i did, im trying to get the display to change color depending on result, this is the closest i've come, but it just shows red no matter what the result is, so what more do i need to add?

 <script>
 function checkNum() {
 var x = document.kalk.disp.value; 
 if (x.match(/[a-zA-Z]+/)) { 
     kalk.disp.value=("Endast siffror!"); 
    kalk.disp.style.background = "red"; 
 }   else {
    kalk.disp.value = eval(x);
   (eval.value===0)
    kalk.disp.style.background = "green";
   (eval.value>=1)
    kalk.disp.style.background = "blue";
  (eval.value<=-1)
    kalk.disp.style.background = "red";
}
}
</script>

here's the html

 <form name="kalk"> 
 <input type="text" name="disp" >
 <br>
 <input type="button" value="7" OnClick="kalk.disp.value+='7'">
 <input type="button" value="8" OnClick="kalk.disp.value+='8'">
 <input type="button" value="9" OnClick="kalk.disp.value+='9'">
 <input type="button" value="*" OnClick="kalk.disp.value+='*'">
 <br>
 <input type="button" value="4" OnClick="kalk.disp.value+='4'">
 <input type="button" value="5" OnClick="kalk.disp.value+='5'">
 <input type="button" value="6" OnClick="kalk.disp.value+='6'">
 <input type="button" value="-" OnClick="kalk.disp.value+='-'">
 <br>
 <input type="button" value="1" OnClick="kalk.disp.value+='1'">
 <input type="button" value="2" OnClick="kalk.disp.value+='2'">
 <input type="button" value="3" OnClick="kalk.disp.value+='3'">
 <input type="button" value="+" OnClick="kalk.disp.value+='+'">
 <br>
 <input type="button" value="C" OnClick="kalk.disp.value=''">
 <input type="button" value="0" OnClick="kalk.disp.value+='0'">
 <input type="button" value="." OnClick="kalk.disp.value+='.'">
 <input type="button" value="=" OnClick="checkNum()" >
 </form>

its basically this that i have added

 (eval.value===0)
 kalk.disp.style.background = "green";
 (eval.value>=1)
 kalk.disp.style.background = "blue";
 (eval.value<=-1)
  kalk.disp.style.background = "red";

Answer 1

You are using the eval wrong.

You need some if-statements or something like this:

function checkNum() {
    var x = document.kalk.disp.value;
    if (x.match(/[a-zA-Z]+/)) {
        kalk.disp.value = ("Endast siffror!");
        kalk.disp.style.background = "red";
    } else {
        var result = eval(x);

        kalk.disp.value = result;
        if (result > 0) {
            kalk.disp.style.background = "blue";
        } else if (result === 0) {
            kalk.disp.style.background = "green";
        } else {
            kalk.disp.style.background = "red";
        }

    }
}

fiddle

Answer 2

function checkNum() {
var x = document.kalk.disp.value;
if (x.match(/[a-zA-Z]+/)) {
    kalk.disp.value = ("Endast siffror!");
    kalk.disp.style.background = "red";
} else {
    var result = eval(x);

    kalk.disp.value = result;
    if (result > 0) {
        kalk.disp.style.background = "blue";
    } else if (result === 0) {
        kalk.disp.style.background = "green";
    } else {
        kalk.disp.style.background = "red";
    }

}