Question

当我单击“计算”按钮时，它没有显示期望的结果，它在btnvalue输入中显示的结果与以前相同，如果以前的btnvalue是2 + 3，则在单击“计算”按钮2 + 3之后显示了相同的结果，但是我希望显示为5。

我已经尝试了所有函数valueOf等，但是我没有得到结果，我在子行text3中编写了代码，并在XAMPP控制面板v3.2.2中对其进行了演绎

<!DOCTYPE html>
<html>
<head>
    <title>calculater</title>
    <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
    <div style="padding-left:40px">
    <h2> PHP Calculator</h2>
    <form method="post" id="formID">

        Enter value: <input type="text" name="btnValue" id='btnValue'> <br> <br> 
        <div style="padding-left: 105px">
            <input type="button" value="9" name="btn1">
            <input type="button" value="8" name="btn2">
            <input type="button" value="7" name="btn3">
            <input type="button" value="+" name="btn4"> <br>
            <input type="button" value="6" name="btn5">
            <input type="button" value="5" name="btn6">
            <input type="button" value="4" name="btn7">
            <input type="button" value="-" name="btn8" style="padding-left: 9px"> <br>
            <input type="button" value="3" name="btn8">
            <input type="button" value="2" name="btn9">
            <input type="button" value="1" name="btn10">
            <input type="button" value="/" name="btn11" style="padding-left: 9px"> <br>
            <input type="button" value="0" name="btn12" style="padding- left:33px"> 
            <input type="button" value="." name="btn13" style="padding-right:9px">
            <input type="button" value="x" name="btn14" style="padding left: 7px"><br>
        </div> <br> 
            <input type="button" id="Calculate" value="calculate" name="Calculator">
    </form>     
   </div>
   <script type="text/javascript">
       $(document).ready(function(){ 
        $('input[type=button]').click(function(){
            if($('#btnValue').val()==''){
             $('#btnValue').val($(this).val());
             }else{
             $('#btnValue').val($('#btnValue').val()+($(this).val()));
                }
        });

      $('#Calculate').click(function(){ 


         var cal=$('#btnValue').val( );
         $('#btnValue').val(cal.valueOf() );


     });
    });
   </script>
</body>
</html>

我希望2 + 3的计算结果是5而不是2 + 3。

Answer 1

据我所知，您已将点击功能添加到此处的所有按钮：

$(document).ready(function(){ 
    $('input[type=button]').click(function(){

这包括您的计算按钮，因为它也是输入[type = button]，它的ID为Calculate。因此，即使您将这两个功能分开，ready函数仍会接管并将calculate按钮的值放入文本字段。尝试仅将预单击功能添加到已由div标记分隔的按钮上，并排除计算按钮。我不是jquery的专家，所以希望对您有帮助

Answer 2

就像KJEK-Code所说的那样，您在所有按钮上都设置了一个点击侦听器，然后尝试在计算按钮上进行了设置。其次，cal.valueOf()将不返回计算所得的值，它将返回与cal相同的值。我已基于此链接添加了一些修复程序：https://codepen.io/simonja2/pen/QbGYbR

<!DOCTYPE html>
<html>
<head>
    <title>calculater</title>
    <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
    <div style="padding-left:40px">
    <h2> PHP Calculator</h2>
    <form method="post" id="formID">

        Enter value: <input type="text" name="btnValue" id='btnValue'> <br> <br> 
        <div style="padding-left: 105px">
            <input type="button" value="9" name="btn1">
            <input type="button" value="8" name="btn2">
            <input type="button" value="7" name="btn3">
            <input type="button" value="+" name="btn4"> <br>
            <input type="button" value="6" name="btn5">
            <input type="button" value="5" name="btn6">
            <input type="button" value="4" name="btn7">
            <input type="button" value="-" name="btn8" style="padding-left: 9px"> <br>
            <input type="button" value="3" name="btn8">
            <input type="button" value="2" name="btn9">
            <input type="button" value="1" name="btn10">
            <input type="button" value="/" name="btn11" style="padding-left: 9px"> <br>
            <input type="button" value="0" name="btn12" style="padding- left:33px"> 
            <input type="button" value="." name="btn13" style="padding-right:9px">
            <input type="button" value="x" name="btn14" style="padding left: 7px"><br>
        </div> <br> 
            <input type="button" id="Calculate" value="calculate" name="Calculator">
    </form>     
   </div>
   <script type="text/javascript">
       $(document).ready(function(){ 
        $('input[type=button]').click(function(){
            console.log($(this).val());
            if($(this).val() == "calculate") {
                var cal=$('#btnValue').val( );
                $('#btnValue').val(calculate(cal));
                console.log(cal.valueOf());

            } else {
                if($('#btnValue').val()==''){
                    $('#btnValue').val($(this).val());
                } else {
                    $('#btnValue').val($('#btnValue').val()+($(this).val()));
                }
            }
        });

        calculate = (value) => {
            for (var i = 0; i < value.length; i++) {
                if(isOperator(value[i])) {
                    var o = value[i];
                    var a = value.slice(0, i);
                    var b = value.slice(i+1);
                    return operate(a, b, o);
                } 
            }
            return value;
        }

        isOperator = function(value) {
          return value === '/' || value === '*' || value === '+' || value === '-';
        };

        operate = function(a, b, operation) {
              a = parseFloat(a);
              b = parseFloat(b);
              console.log(a, b, operation);
              if (operation === '+') return a + b;
              if (operation === '-') return a - b;
              if (operation === '*') return a * b;
              if (operation === '/') return a / b;
            }
    });
   </script>
</body>
</html>

答案未按预期方式显示

2 个答案: