如何在每次输入新输入时获取附加输出以进行刷新？

Question

我正在使用jQuery创建一个收入计算器，其中表单中的两个HTML输入被添加到一起并附加到.div以给出总收入。它成功地做到了这一点，但与每次输入新号码时更换输出的总数相反，它将其添加到前一总数的末尾，例如， £24£45。

每次进行新计算时，如何更换输出？

另一方面，如果我只在一个输入框中输入一个数字，我得到一个“NaN”的输出，有没有办法摆脱这个，只输出一个数字？

谢谢。

$(document).ready(function () {
    $(".incomeform").blur(function () {
        primaryincome = $("#primaryincome").val();
        otherincome = $("#otherincome").val();
        totalincome = parseFloat(primaryincome) + parseFloat(otherincome);
        $(".incometotal").append("£" + totalincome)
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--income-->
      <div class="main">
         <div class="container">
            <div class="incometotal">Income Total: </div>
            <div class="row">
                 <form id="incomeform">
                     <div class="col-xs-6">
                         <input id="primaryincome" class="incomeform" type="text" placeholder="primary income">
                     </div>
                    <div class="col-xs-6">
                         <input id="otherincome" class="incomeform" type="text" placeholder="other income">
                     </div>
                 </form>
             </div>
          </div>
      </div>

Answer 1

使用.html()而不是.append()：

＆＃13;

＆＃13;

$(document).ready(function () {
    $(".incomeform").blur(function () {
        primaryincome = $("#primaryincome").val() || 0;
        otherincome = $("#otherincome").val() || 0;
        totalincome = parseFloat(primaryincome) + parseFloat(otherincome);
        $(".incometotal").html("£" + totalincome)
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--income-->
      <div class="main">
         <div class="container">
            <div class="incometotal">Income Total: </div>
            <div class="row">
                 <form id="incomeform">
                     <div class="col-xs-6">
                         <input id="primaryincome" class="incomeform" type="text" placeholder="primary income">
                     </div>
                    <div class="col-xs-6">
                         <input id="otherincome" class="incomeform" type="text" placeholder="other income">
                     </div>
                 </form>
             </div>
          </div>
      </div>

＆＃13;

＆＃13;

＆＃13;

请注意，我还添加了|| 0，这样当只有一个输入有值时，您就不会获得NaN。

Answer 2

在span div元素中创建incometotal，然后使用.html() / .text()设置该元素

＆＃13;

＆＃13;

$(document).ready(function () {
    $(".incomeform").blur(function () {
        primaryincome = $("#primaryincome").val();
        otherincome = $("#otherincome").val();
        totalincome = parseFloat(primaryincome) + parseFloat(otherincome);
      
        $(".incometotal span").html("£" + totalincome)
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--income-->
      <div class="main">
         <div class="container">
            <div class="incometotal">Income Total: <span></span></div>
            <div class="row">
                 <form id="incomeform">
                     <div class="col-xs-6">
                         <input id="primaryincome" class="incomeform" type="text" placeholder="primary income">
                     </div>
                    <div class="col-xs-6">
                         <input id="otherincome" class="incomeform" type="text" placeholder="other income">
                     </div>
                 </form>
             </div>
          </div>
      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需更改最后一行：

$(".incometotal").html("£" + totalincome);

＆＃13;

＆＃13;

$(document).ready(function () {
    $(".incomeform").blur(function () {
        primaryincome = $("#primaryincome").val();
        otherincome = $("#otherincome").val();
        totalincome = parseFloat(primaryincome) + parseFloat(otherincome);
        $(".incometotal").html("£" + totalincome)
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--income-->
      <div class="main">
         <div class="container">
            <div class="incometotal">Income Total: </div>
            <div class="row">
                 <form id="incomeform">
                     <div class="col-xs-6">
                         <input id="primaryincome" class="incomeform" type="text" placeholder="primary income">
                     </div>
                    <div class="col-xs-6">
                         <input id="otherincome" class="incomeform" type="text" placeholder="other income">
                     </div>
                 </form>
             </div>
          </div>
      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你告诉它将新值添加到已存在的任何文本中;这就是它正在做的事情。

你想要它要做的是用新值替换那些，包括标签。像这样：

$(".incometotal").text("Income Total: £" + totalincome);

Answer 5

  

我找不到合适的活动。

是的，没有一个。

有DOM Mutation Events，但是跨浏览器不支持它们，并且不会触发表单值，因为它们没有反映在属性中（IE中除了由于错误）。< / p>

仅在Mozilla中，可以在value属性上设置JavaScript watch以捕获脚本化更改。仅在IE中，可以设置JScript onpropertychange处理程序以捕获脚本和用户驱动的更改。在其他浏览器中，您必须使用自己的间隔轮询器来查找更改。

function watchProperty(obj, name, handler) {
    if ('watch' in obj) {
        obj.watch(name, handler);
    } else if ('onpropertychange' in obj) {
        name= name.toLowerCase();
        obj.onpropertychange= function() {
            if (window.event.propertyName.toLowerCase()===name)
                handler.call(obj);
        };
    } else {
        var o= obj[name];
        setInterval(function() {
            var n= obj[name];
            if (o!==n) {
                o= n;
                handler.call(obj);
            }
        }, 200);
    }
}

watchProperty(document.getElementById('myinput'), 'value', function() {
    alert('changed!');
});

这非常令人不满意。它不会响应Mozilla中用户驱动的更改，它只允许IE中每个对象使用一个监视属性，而在其他浏览器中，处理函数将在执行流程中稍后调用。

几乎可以肯定的是，重写设置value以调用setValue包装函数的脚本部分，您可以监视要捕获的更改。

Answer 6

$(document).ready(function () {
    $(".incomeform").blur(function () {
        primaryincome = $("#primaryincome").val();
        otherincome = $("#otherincome").val();
        if( isNaN(primaryincome) || primaryincome == ""  ){primaryincome = 0;}
        if( isNaN(otherincome) || otherincome == ""  ){otherincome = 0;}
        totalincome = parseFloat(primaryincome) + parseFloat(otherincome);
        $("#total_amount").html("£" + totalincome)
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--income-->
      <div class="main">
         <div class="container">
            <div class="incometotal">Income Total: <span id="total_amount"></span></div>
            <div class="row">
                 <form id="incomeform">
                     <div class="col-xs-6">
                         <input id="primaryincome" class="incomeform" type="text" placeholder="primary income">
                     </div>
                    <div class="col-xs-6">
                         <input id="otherincome" class="incomeform" type="text" placeholder="other income">
                     </div>
                 </form>
             </div>
          </div>
      </div>

您好，这应该可以解决问题。

Answer 7

正如我之前的其他答案所述，你会

• 使用.html()方法代替.append()方法

但是，如果符合您的需要，我会建议以下更改：

1. 使用type="number"代替type =＆＃34; text＆＃34; 以确保仅输入数字值。这也使您可以递增或递减当前值。
2. 使用input事件代替blur事件来提高响应能力。
3. **您也可以设置value="0"以便始终拥有初始值，并且可以在页面加载时触发input事件以利用这些初始值。
＆＃13;
＆＃13;
$(document).ready(function () {
    $('input.incomeform').on('input', function() {
        var f = $('#incomeform')[0];
        $('div.incometotal').html('£' + (+f.primaryincome.value + +f.otherincome.value) );
    })
    .trigger('input');
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--income-->
      <div class="main">
         <div class="container">
            <div class="incometotal">Income Total: </div>
            <div class="row">
                 <form id="incomeform">
                     <div class="col-xs-6">
                         <input id="primaryincome" class="incomeform" type="number" value="0" placeholder="primary income">
                     </div>
                    <div class="col-xs-6">
                         <input id="otherincome" class="incomeform" type="number" value="0" placeholder="other income">
                     </div>
                 </form>
             </div>
          </div>
      </div>
＆＃13;
＆＃13;
＆＃13;