如何将文本值用作数学运算符

我正在尝试构建一个简单的计算器，其中用户输入 2 个正数和一个计算符号 (+,-,*，/(，并在 keyup 时调用 jQuery 脚本来计算结果并将其打印出来。

我很难让脚本读取我的符号并执行 if 语句。我尝试在keyup功能中包含所有数字或仅包含最后一个(符号(。什么都没用！

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#symbol1").keyup(function(){
        var symbol = $("[name='symbol1']").val();
        var fnum = $("[name='fnum']").val();
        var snum = $("[name='snum']").val();
        if(symbol == "+"){
        var result = fnum + snum;
        $("#result").html(result)
        }
        else if(symbol == "-"){
        var result = Math.abs(fnum - snum);
        $("#result").html(result)
        }
        else if(symbol == "*"){
        var result = fnum*snum;
        $("#result").html(result)
        }
        else if(symbol == "/"){
        var result = fnum/snum;
        $("#result").html(result)
        }
        else{alert("Please input a correct math symbol");}
      });
    });
    </script>
    </head>
    <body>
            <center>
            <form id="calc">
                        First Number: <input class="calculations" type="text" name="fnum" size="10" required><br>
              <br>
              Second Number:<input class="calculations" type="text" name="snum" size="10" required><br>
              <br>
              Symbol:<input class="calculations" type="text" name="symbol1" size="10" required><br>
            <p>Result is: <input type="text" id=result></p>
              </form>
            </center>
        </body>
    </html>

我希望按下数学符号后会显示结果，但事实并非如此。提前感谢每一个建议。我已经创建了一个简单的 BMI 计算器，它可以与提交函数配合使用。但这一次我没有任何运气。附言：对不起，如果我的代码不可读，我才刚刚开始学习jQuery！

只是代码中的几个问题

首先，您正在收听：

$("#symbol1").keyup()

但是您没有为"symbol1"输入提供要识别的 ID(仅是名称属性(

其次，您正在设置结果的html，而不是val，即使结果是输入

最后，您需要将 fnum 和 snum 的值转换为 Number，因为它们是字符串(因此 4 + 5 将返回 45(

这是一个可以工作的片段

$(document).ready(function(){
      $("#symbol1").keyup(function(){
        var symbol = $("[name='symbol1']").val();
        var fnum = Number($("[name='fnum']").val());
        var snum = Number($("[name='snum']").val());
        if(symbol == "+"){
        var result = fnum + snum;
        $("#result").val(result)
        }
        else if(symbol == "-"){
        var result = Math.abs(fnum - snum);
        $("#result").val(result)
        }
        else if(symbol == "*"){
        var result = fnum*snum;
        $("#result").val(result)
        }
        else if(symbol == "/"){
        var result = fnum/snum;
        $("#result").val(result)
        }
        else{alert("Please input a correct math symbol");}
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
            <center>
            <form id="calc">
                        First Number: <input class="calculations" type="text" name="fnum" size="10" required><br>
              <br>
              Second Number:<input class="calculations" type="text" name="snum" size="10" required><br>
              <br>
              Symbol:<input class="calculations" type="text" name="symbol1" size="10" required id="symbol1"><br>
            <p>Result is: <input type="text" id=result></p>
              </form>
            </center>
        </body>
    </html>

您的选择器需要一个 ID，而不是一个名称。

<input class="calculations" type="text" id="symbol1" size="10" required>
// --------------------------------------^

小提琴

Νίκος Τιτομιχελάκης 指出你需要将字符串转换为数字。此外，在 if 语句外部定义result，这样就不必重复初始化它，并在页面中设置一次文本值，也可以在 if 语句外部设置一次。

此外，警报对于作为开发人员和用户的您来说都是一种痛苦。 jQuery使将消息放入页面变得容易，就像我在演示中所做的那样。

缺少

的东西很少，你的代码是可读的:)带有更新代码的 PLNKR 链接

var symbol = $("[name='symbol1']").val();
var fnum = $("[name='fnum']").val();
var snum = $("[name='snum']").val();               
if(symbol == "+"){
  var result = fnum + snum;
  $("#result").val(result)
 }
 <p>Result is: <input type="text" id="result"></p>

以上引号------------------------------------^-----^

完整代码https://plnkr.co/edit/SLyOZEE6WQRnygfHPJix?p=preview

相关内容

最新更新

热门标签：