减去两个文本字段，并在javascript或jquery中的第三个文本字段上显示结果

我如何从第二次读取中减去第一次读取并显示总计读取，而不直接在表单字段上，但在脚本上添加任何onclick、onkeyup、onblur等（我不会触摸表单，因为它是一个短代码）。如果在jQuery中，我将需要非冲突代码，因为我将在Wordpress中使用它。提前谢谢你

<form name="log" id="log">

<input type="text" name="first_reading" id="first_reading">
<input type="text" name="second_reading" id="second_reading">

<input type="text" name="total_reading" id="total_reading">

</form>

---

您可以在footer.php文件中使用jquery对其进行归档，下面是

---

您好，下面是我的代码，我正在尝试使用这个解决方案，只需稍加修改，非常感谢您的帮助。我的代码不显示输出，但没有错误

@如果（ViewBag.Admin==true） {

@LabelFor（model=>model.Workplan.FundingGrant，htmlAttributes:new{@class=“control label col-md-2”}）
@EditorFor（model=>model.FundingGrant，new{htmlAttributes=new{@class=“txt form control”、@name=“txt”、@readOnly=“true”、@id=“a”}}）
@Html.ValidationMessageFor（model=>model.FundingGrant，“，new{@class=“text danger”}）
}
其他的
{
@LabelFor（model=>model.Workplan.FundingGrant，htmlAttributes:new{@class=“control label col-md-2”}）
@Html.TextBoxFor（model=>model.FundingGrant，新的{@class=“txt表单控件”、@name=“txt”、@id=“a”}）
@Html.ValidationMessageFor（model=>model.FundingGrant，“，new{@class=“text danger”}）
}
@Label（“从上一年结转的资金”，htmlAttributes:new{@class=“control Label col-md-2”}）
@EditorFor（model=>model.FundingCarriedOver，new{htmlAttributes=new{@class=“txt form control”、@name=“txt”、@id=“b”}）
@Html.ValidationMessageFor（model=>model.AdminFee，“，new{@class=“text danger”}）
@Html.Label（“管理费（最高为资助金的5%）”，htmlAttributes:new{@class=“control Label col-md-2”}）
@EditorFor（model=>model.AdminFee，new{htmlAttributes=new{@class=“txt form control”、@name=“txt”、@id=“c”}）
@Html.ValidationMessageFor（model=>model.AdminFee，“，new{@class=“text danger”}）
@Label（“第C节将花费的资金总额”，htmlAttributes:new{@class=“control Label col-md-2”}）
@TextBox（“TotalFundingToBeSpentInSectionC”，“”，“{0:c}”，新建{@class=“form control”，@readOnly=“true”，@value=“0.00”}）
$（文档）.ready（函数（）{
如果（$（“.txt”）.length）{
$（“#a”）.keyup（函数（）{
$.sum（）；
});
$（“#a”）.mousemove（函数（）{
$.sum（）；
});
$（“#a”）。在（函数（）之后{
$.sum（）；
});
//从b获取输入
$（“#b”）.keyup（函数（）{
$.sum（）；
});
$（“#b”）.mousemove（函数（）{
$.sum（）；
});
$（“#b”）。在（函数（）之后{
$.sum（）；
});
//从c获取输入
$（“#c”）.keyup（函数（）{
$.sum（）；
$（“#c”）.mousemove（函数（）{
$.sum（）；
$（“#c”）。在（函数（）之后{
$.sum（）；
});
});
});
//$.sum=函数（）{
函数和（）{
var总和=0；
//遍历每个文本框并添加值
$（“.txt”）。每个（函数（）{
如果（！isNaN（this.value）&&this.value.trim（）.length！=0）{
sum=parseFloat（$（“#a”）.val（））+parseFloat（$（“#b”）.val（））-parseFloat（$（“#c”）.val（））；
}
});
如果（！isNaN（总和））{
document.getElementById（“TotalFundingTobesPentinc”）.value=
“$”+sum.toFixed（2）.替换（/（\d）（？=（\d\d\d）+（？！\d））/g，“$1”）；
}
//sum=$（“#tot”）.val（parseFloat（$（“#a”）.val（））+parseFloat（$（“#b”）.val（））-parseFloat（$（“#c”）.val（））；
//sum=parseFloat（$（“#a”）.val（））+parseFloat（$（“#b”）.val（））-parseFloat（$（“#c”）.val（））；
// });
}

在这种情况下，您可以使用AngularJS谢谢xzegga！我不得不在添加

jQuery（document）.ready（函数（$）{

时对其进行了一些修改，并更改了+for-符号（这是一个减法），但最后它在我的页面标题上起了作用。祝你好运，Ed。不，我的问题是，如何避免在键入…？@LaloMárquez时在#total_reading字段中出现NaN？@LaloMárquez您可以启动输入，将0作为值，这将避免NaN结果，或者您可以在获取之前在$.sum函数中验证这些值substraction@LaloM阿尔克斯一世已经更新了用小提琴来避免NaN结果：@zegga:谢谢，我如何在我的代码中实现它？这里是：

/**/

$(document).ready(function() {
    if($("#log").length){
        $( "#first_reading" ).keyup(function() {
            $.sum();          
        }); 
        $( "#second_reading" ).keyup(function() {
            $.sum();          
        }); 
     }   
        $.sum = function(){
            $("#total_reading").val(parseInt($("#first_reading").val()) + parseInt($("#second_reading").val()));
        } 
});

    <div class="form-group">
        @Html.LabelFor(model => model.Workplan.FundingGrant, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.FundingGrant, new { htmlAttributes = new { @class = "txt form-control", @name = "txt", @readOnly = "true", @id = "a" } })
            @Html.ValidationMessageFor(model => model.FundingGrant, "", new { @class = "text-danger" })
        </div>
    </div>
}
else
{

    <div class="form-group">
        @Html.LabelFor(model => model.Workplan.FundingGrant, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.FundingGrant, new { @class = "txt form-control", @name = "txt", @id = "a" })
            @Html.ValidationMessageFor(model => model.FundingGrant, "", new { @class = "text-danger" })
        </div>
    </div>

}


<div class="form-group">
    @Html.Label("Funding Carried Over from Previous Year", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.FundingCarriedOver, new { htmlAttributes = new { @class = "txt form-control", @name = "txt", @id = "b" } })
        @Html.ValidationMessageFor(model => model.AdminFee, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.Label("Admin Fee (Max of 5% of Funding Grant)", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.AdminFee, new { htmlAttributes = new { @class = "txt form-control", @name = "txt", @id = "c" } })
        @Html.ValidationMessageFor(model => model.AdminFee, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.Label("Total Funding To Be Spent In Section C", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBox("TotalFundingToBeSpentInSectionC", "", "{0:c}", new { @class = "form-control", @readOnly = "true", @value = "0.00" })
    </div>
    <script>
        $(document).ready(function () {
            if ($(".txt").length) {
                $("#a").keyup(function () {
                    $.sum();
                });

                $("#a").mousemove(function () {
                    $.sum();
                });

                $("#a").after(function () {
                    $.sum();
                });

                //take the input from b
                $("#b").keyup(function () {
                    $.sum();
                });

                $("#b").mousemove(function () {
                    $.sum();
                });

                $("#b").after(function () {
                    $.sum();
                });

                //take the input from c
                $("#c").keyup(function () {
                    $.sum();

                    $("#c").mousemove(function () {
                        $.sum();

                        $("#c").after(function () {
                            $.sum();
                        });
                    });
                });

                // $.sum = function () {
                function sum() {
                    var sum = 0;
                    //iterate through each textboxes and add the values
                    $(".txt").each(function () {

                        if (!isNaN(this.value) && this.value.trim().length != 0) {
                            sum = parseFloat($("#a").val()) + parseFloat($("#b").val()) - parseFloat($("#c").val());
                        }

                    });
                    if (!isNaN(sum)) {
                        document.getElementById("TotalFundingToBeSpentInSectionC").value =
                            '$' + sum.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

                    }

                    // sum = $("#tot").val(parseFloat($("#a").val()) + parseFloat($("#b").val()) - parseFloat($("#c").val()));
                    // sum = parseFloat($("#a").val()) + parseFloat($("#b").val()) - parseFloat($("#c").val());
                    // });
                }
    </script>