Javascript计算器-eval()不工作

Javascript计算器-eval()不工作,javascript,calculator,Javascript,Calculator,我正在尝试构建一个Javascript计算器,但它不工作,因为eval()与我使用的方式不兼容。在我的控制台中,它给我输入字段的单个值。下面是我正在使用的代码 <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <input type="text" name="" disabled="true" id="i

我正在尝试构建一个Javascript计算器,但它不工作,因为eval()与我使用的方式不兼容。在我的控制台中,它给我输入字段的单个值。下面是我正在使用的代码

    <!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <input type="text" name="" disabled="true" id="inputField">
    <button id="btn5" value="5">5</button>
    <button id="btn2" value="2">2</button>
    <button id="operator" value="+">+</button>
    <button id="eval">=</button>
</body>

<script type="text/javascript">
    var btn5 = document.getElementById('btn5');
    var btn2 = document.getElementById('btn2');
    var inpField = document.getElementById('inputField');
    var operator = document.getElementById('operator');
    var eval = document.getElementById('eval');

    btn5.addEventListener('click', btn5Function);
    btn2.addEventListener('click', btn2Function);
    operator.addEventListener('click', operatorFunction);
    eval.addEventListener('click', evalFunction)
    //inpField.value = "";

    function btn5Function() {
        inpField.value += btn5.value;
    }

    function btn2Function() {
        inpField.value += btn2.value;
    }

    function operatorFunction() {
        inpField.value += operator.value;
    }

    function evalFunction() {
        var storeVal = parseInt(inpField.value);
        console.log(storeVal);
        var cal = eval(storeVal);
        inpField.value = cal;
        }

</script>

</html>

测验
5.
2.
+
=
var btn5=document.getElementById('btn5');
var btn2=document.getElementById('btn2');
var inpField=document.getElementById('inputField');
var operator=document.getElementById('operator');
var eval=document.getElementById('eval');
btn5.addEventListener('click',btn5函数);
btn2.addEventListener('click',btn2函数);
operator.addEventListener('click',operator函数);
eval.addEventListener('click',eval函数)
//inpField.value=“”;
函数BTN5函数(){
inpField.value+=btn5.value;
}
函数btn2Function(){
inpField.value+=btn2.value;
}
函数运算符函数(){
inpField.value+=operator.value;
}
函数evalFunction(){
var storeVal=parseInt(inpField.value);
console.log(storeVal);
var cal=评估值(存储值);
inpField.value=cal;
}

在JavaScript中,在严格模式的范围之外,您可以覆盖JavaScript函数和关键字。在这种情况下,您将覆盖
eval
函数:

var eval = document.getElementById('eval');
重命名该变量会导致问题消失


我还注意到,您对
parseInt
函数的使用没有100%的信心,您可以阅读更多我认为问题在于您试图在包含运算符的字符串上解析int,因此出现了以下问题:

var storeVal = parseInt(inpField.value);  <-- this will not work.

var storeVal=parseInt(inpField.value);不工作。它给我的是先按的号码。例如,如果我按“5”然后按“+”然后按“2”,它只给我“5”。因为您使用的是
parseInt
parseInt
从左到右查找数字,当遇到非数字字符时停止。因此,如果您有
2+3
函数读取第一个字符
2
,并且没有问题,那么它遇到了一个非数字字符
+
,并在这里停止并返回2。您不需要将值转换为整数,因为
eval
需要一个字符串