时间戳

首页 > 解决方案 > 未以所需方式显示的答案

html - 未以所需方式显示的答案

问题描述

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

我已经尝试了所有函数 valueOf 等，但我没有得到结果，我在 subline 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。

标签： html

解决方案

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

推荐阅读