Question

这是我的计算器代码：

function clear(val) {
  document.getElementById("Input").value = val;
}

function show(val) {
  document.getElementById("Input").value += val;
}

<input type="text" id="Input" style="width: 101px">
<br>
<br>
<input type="button" value="C" id="btnC" onclick="" style="width: 105px" onclick="clear()">
<br>
<br>
<input type="button" value="(" id="btn(" style="width: 24px">
<input type="button" value=")" id="btn)" style="width: 24px">
<input type="button" value="←" id="btn←" style="width: 21px">



<br>
<br>

<input type="button" value="7" id="btn7" onclick="show('7')">
<input type="button" value="8" id="btn8" onclick="show('8')">
<input type="button" value="9" id="btn9" onclick="show('9')">
<input type="button" value="×" id="btn×" style="width: 24px">
<br>
<br>
<input type="button" value="4" id="btn4" onclick="show('4')">
<input type="button" value="5" id="btn5" onclick="show('5')">
<input type="button" value="6" id="btn6" onclick="show('6')">
<input type="button" value="÷" id="btn÷" style="width: 23px" onclick="show('÷')">
<br>
<br>
<input type="button" value="+" id="btn+" onclick="show('+')">
<input type="button" value="1" id="btn1" onclick="show('1')">
<input type="button" value="2" id="btn2" onclick="show('2')">
<input type="button" value="3" id="btn3" onclick="show('3')">
<input type="button" value="-" id="btn-" style="width: 24px" onclick="show('-')">

<br>
<br>
<input type="button" value="0" id="btn0" onclick="show('0')">
<input type="button" value="." id="btn." onclick="show('.')">
<input type="button" value="+/−" id="btn+/−" style="width: 24px" onclick="show('-')">
<input type="button" value="=" id="btn=" style="width: 24px" onclick="">
<br>
<br>

您可能已经注意到，目前没有操作员在工作。我正在使用功能，但是我不知道操作员或功能的代码。有什么建议么？甚至一些种子代码也会很有用。谢谢！

Answer 1

您可以使用eval()来评估计算器的input的值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="Input" style="width: 101px">
    <br>
    <br>
    <input type="button" onClick="clearCalc()" value="C" id="btnC"  style="width: 105px">
    <br>
    <br>
    <input type="button" value="(" id="btn(" style="width: 24px">
    <input type="button" value=")" id="btn)" style="width: 24px">
    <input type="button" value="←" id="btn←" style="width: 21px" onClick="del()">



    <br>
    <br>

    <input type="button" value="7" id="btn7" onclick="show('7')">
    <input type="button" value="8" id="btn8" onclick="show('8')">
    <input type="button" value="9" id="btn9" onclick="show('9')">
    <input type="button" value="×" id="btn×" style="width: 24px" onclick="show('*')">
    <br>
    <br>
    <input type="button" value="4" id="btn4" onclick="show('4')">
    <input type="button" value="5" id="btn5" onclick="show('5')">
    <input type="button" value="6" id="btn6" onclick="show('6')">
    <input type="button" value="÷" id="btn÷" style="width: 23px" onclick="show('÷')">
    <br>
    <br>
    <input type="button" value="+" id="btn+" onclick="show('+')">
    <input type="button" value="1" id="btn1" onclick="show('1')">
    <input type="button" value="2" id="btn2" onclick="show('2')">
    <input type="button" value="3" id="btn3" onclick="show('3')">
    <input type="button" value="-" id="btn-" style="width: 24px" onclick="show('-')">

    <br>
    <br>
    <input type="button" value="0" id="btn0" onclick="show('0')">
    <input type="button" value="." id="btn." onclick="show('.')">
    <input type="button" value="+/−" id="btn+/−" style="width: 24px" onclick="show('-')">
    <input type="button" value="=" id="btn=" style="width: 24px" onclick="evaluateCalc()">
    <br>
    <br>
    <script>
    function clearCalc() {
         document.getElementById("Input").value = "";
    }
    function show(val) {
            document.getElementById("Input").value += val;
    }
    function evaluateCalc(){
     try{
    var exp = document.getElementById("Input").value; document.getElementById("Input").value = eval(exp);
     } catch(err){
       //invalid mathematical input
     }
    }
    function del(){
      var input = document.getElementById("Input").value;
      document.getElementById("Input").value = input.substring(0, input.length-1);
    }
    </script>

计算器运算符和功能不起作用

1 个答案: