如何在每次輸入新輸入時獲得附加輸出以進行刷新？

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()：

$(document).ready(function() { 
 
    $(".incomeform").blur(function() { 
 
     primaryincome = $("#primaryincome").val() || 0; 
 
     otherincome = $("#otherincome").val() || 0; 
 
     totalincome = parseFloat(primaryincome) + parseFloat(otherincome); 
 
     $(".incometotal").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: </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>

請注意，我還添加了|| 0，這樣你就不會得到NaN當只有一個輸入具有一個值。

Answer 2

只需更改最後一行：

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

$(document).ready(function() { 
 
    $(".incomeform").blur(function() { 
 
     primaryincome = $("#primaryincome").val(); 
 
     otherincome = $("#otherincome").val(); 
 
     totalincome = parseFloat(primaryincome) + parseFloat(otherincome); 
 
     $(".incometotal").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: </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 3

創建於incometotal div元素一個span，然後用.html()/.text()來設置元素

$(document).ready(function() { 
 
    $(".incomeform").blur(function() { 
 
     primaryincome = $("#primaryincome").val(); 
 
     otherincome = $("#otherincome").val(); 
 
     totalincome = parseFloat(primaryincome) + parseFloat(otherincome); 
 
     
 
     $(".incometotal span").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></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 4

您告訴它將新值添加到任何文本已經存在的地方;這就是它正在做的事情。

你想要什麼它要做的就是用新值，包括標籤替換它。像這樣：

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

Answer 5

我無法找到一個合適的事件。

是的，沒有一個。

有DOM Mutation Events，但它們不被跨瀏覽器支持，並且不會因表單值而被觸發，因爲它們沒有反映在屬性中（除IE之外由於錯誤）。

僅在Mozilla中，可以在值屬性上設置一個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 =「text」以確保只輸入數字值。這也使您能夠增加或減少當前值。
2. 使用input事件而不是blur事件來提高響應性。
3. **您也可以設置value="0"，以便始終保持初始值，並且可以在頁面加載時觸發input事件以利用這些初始值。

$(document).ready(function() { 
 
    $('input.incomeform').on('input', function() { 
 
     var f = $('#incomeform')[0]; 
 
     $('div.incometotal').html('£' + (+f.primaryincome.value + +f.otherincome.value)); 
 
    }) 
 
    .trigger('input'); 
 
});

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