jQuery计算账单总额

时间:2018-08-19 14:12:36

标签: javascript jquery events dom

我的表单中有3个文本字段。第一个收取票据中的数量值,第二个收取每件商品的价格值,第三个收取适用税项的值。我将在第4个文本字段中显示最终的帐单金额。我尝试了以下代码:

void btn_Click(object sender, EventArgs e)
{
    Button btn = (Button)sender;
    btn.BackColor = Color.Aqua;
    btn.ForeColor = Color.Red;

    int a = 0;
    // xy is the word that user should estimate
    for (int i = 0; i < xy.Length; i++)
    {
        if (this.Controls.Find("txt" + i, true)[0].Text == btn.Text)
        {
            this.Controls.Find("txt" + i, true)[0].Text = btn.Text;
            this.Controls.Find("txt" + i, true)[0].BackColor = Color.White;
        }
        else
        {
            a++;

            switch(a)
            {
                case 1:
                    pictbx.Image = Image.FromFile("D:/Csharp_Pro/Games/Mine/hangman/hangman/skeleton1.png");
                    break;
                case 2:
                    pictbx.Image = Image.FromFile("D:/Csharp_Pro/Games/Mine/hangman/hangman/skeleton2.png");
                    break;
                case 3:
                    pictbx.Image = Image.FromFile("D:/Csharp_Pro/Games/Mine/hangman/hangman/skeleton3.png");
                    break;
                case 4:
                    pictbx.Image = Image.FromFile("D:/Csharp_Pro/Games/Mine/hangman/hangman/skeleton4.png");
                    break;
                case 5:
                    pictbx.Image = Image.FromFile("D:/Csharp_Pro/Games/Mine/hangman/hangman/skeleton5.png");
                    break;
                default:
                    break;

            }
        }
    }
}

在运行代码后,第四个文本框中没有显示任何ID为$(document).ready(function () { $('#Quantity, #Rate, #TaxAmount').keyup(function () { var total = 0.0; var qty = $('#Quantity').val(); var rate = $('#Rate').val(); var tax = ('#TaxAmount').val(); var amount = (qty * rate); total = tax + amount; $('#TotalAmount').val(total); }); }); 的文本。无法找出问题所在。请有人指导。

2 个答案:

答案 0 :(得分:1)

首先,您在$行中缺少var tax

此外,您还需要使用parseFloat将从.val()获得的字符串转换为数字,以便对其进行算术运算。

$(document).ready(function() {
  var $fields = $('#Quantity, #Rate, #TaxAmount');
  $fields.keyup(function() {
    var qty = parseFloat($('#Quantity').val());
    var rate = parseFloat($('#Rate').val());
    var tax = parseFloat($('#TaxAmount').val());
    var amount = (qty * rate);
    var total = total = tax + amount;
    $('#TotalAmount').val(total);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Quantity" placeholder="Quantity"> *
<input id="Rate" placeholder="Rate"> +
<input id="TaxAmount" placeholder="Tax"> =
<input id="TotalAmount" readonly>

答案 1 :(得分:1)

您忘记了$之前的('#TaxAmount')符号:

$(document).ready(function () {

    $('#Quantity, #Rate, #TaxAmount').keyup(function () {

        var total = 0;
        var qty = $('#Quantity').val();

        var rate = $('#Rate').val();

        var tax = $('#TaxAmount').val(); // here

        var amount = (qty * rate);
        total = tax + amount;


        $('#TotalAmount').val(total);
    });
});