JavaScript计算器输入背景

Question

您好，出于教育目的，我试图用我的计算器做一些事情，我试图使显示屏根据结果改变颜色，这是我所遇到的最接近的颜色，但是无论显示什么，它都会显示红色。结果是，所以我还需要补充什么？

 <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>

这是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>

它基本上是我添加的

 (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

您使用的评估错误。

您需要一些if语句或类似的东西：

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";
        }

    }
}

小提琴

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";
    }

}