划分輸入時的奇怪行為

Question

我正在構建一個基本應用程序以了解更多信息，但是遇到了一個問題。

我有3個輸入框。 人，賬單，小費。 數學如下：

（清單+小費）/人。 當我嘗試對代碼進行划分時，似乎會加到總數的末尾。

到目前為止，我有這個。 http://jsfiddle.net/ma9ic/a8eJT/

    var updateTotal = function () {
      var people = parseInt($('#people').val());
      var bill = ($('#bill').val());
      var tip = ($('#tip').val());
      var billTip = bill + tip;
      var billTipPeople = billTip / people;




      $('#total').text("£" + billTipPeople) 

如果我能指出正確的方向，那就太好了:)

Answer 1

你很親密 我像這樣工作

var updateTotal = function () {
  var people = parseInt($('#people').val(),10);
  var bill = parseFloat($('#bill').val());
  var tip = parseFloat($('#tip').val());
  var billTip = bill + tip;
  var billTipPeople = billTip / people;
  if (isNaN(billTipPeople)) billTipPeople = 0; // output zero if NaN

  $('#total').text("£" + billTipPeople.toFixed(2)) 

問題是javascript有一些關於字符串連接的怪異規則。 “ 1” +“ 1” ==“ 11”。 您每次都必須明確。

parseInt GOTCHA ：始終使用parseInt的第二個（可選） 基本參數。 否則，將像“ 015”之類的值八進制解析為十進制數字13。 因此，流行的笑話是“為什么程序員會混淆萬聖節和聖誕節？因為OCT31 == DEC25！”

Answer 2

bill + tip將執行字符串連接，而不是加法，因為它們都是字符串。 如果要執行加法運算，則至少一個操作數必須是數字。

雖然parseFloat和parseInt工作，但是使用一元加號運算符的編寫時間較短，並且您不必擔心數字的類型：

var people = +$('#people').val();
var bill = +$('#bill').val();
var tip = +$('#tip').val();

只要輸入值僅由數字組成，此方法就起作用。 但是，如果輸入僅以數字開頭 ，例如"5 foo"並且您想從字符串的開頭提取數字，則實際上必須使用parseInt或parseFloat 。

Answer 3

您的話單和小費變量是字符串。 嘗試使用parseFloat（） 。 在兩個字符串上使用加號（ + ）只會將它們串聯起來。

var bill = parseFloat($('#bill').val());
var tip = parseFloat($('#tip').val());

Answer 4

在一種情況下使用parseInt（）時，為什么在相似情況下不遵循相同的路徑？

無論如何，這是我修改您的代碼的方式：

$(document).ready(function () {

$('input#bill, input#tip').blur(function () {
    var num = parseFloat($(this).val());
    if (isNaN(num)) {
        return;
    }
    var cleanNum = num.toFixed(2);
    $(this).val(cleanNum);
    if (num / cleanNum < 1) {}
});

$('#people, #bill, #tip').keyup(function () {
    updateTotal();
});



var updateTotal = function () {
    var people = parseInt($('#people').val());
    if (isNaN(people) || people === 0) {
        return;
    }
    var bill = parseFloat($('#bill').val());
    if (isNaN(bill)) {
        bill = 0;
    }
    var tip = parseFloat($('#tip').val());
    if (isNaN(tip)) {
        tip = 0;
    }
    var billTip = bill + tip;
    var billTipPeople = billTip / people;

    $('#total').text("£" + billTipPeople);
    // round up to 2 d.p. like below:
    // $('#total').text("£" + billTipPeople.toFixed(2));
};

}）;

為了避免您再次回來詢問您的應用程序為何決定采取另一種瘋狂行為，我添加了以下檢查：

當用戶輸入人數時，即使我們還沒有准備輸入賬單的總費用 ，它也會被更新為NaN。 我們通過...防止這種令人討厭的行為

if (isNaN(num)) {
    return;
}

我們在updateTotal（）函數中采取相同的預防措施。 此外，請注意除以0！*當我與我的gf在一起時，我只會提供提示，否則，像我這樣的人會破壞您的應用程序...

if (isNaN(people) || people === 0) {
    return;
}

這是小提琴 >> http://jsfiddle.net/a8eJT/11/

Answer 5

嘗試在javascript中使用parseInt()和parseFloat() 。當您不使用它們時，它將被視為字符串。

Answer 6

嘗試

var updateTotal = function () {
      var people = parseInt($('#people').val());
      var bill = parseInt($('#bill').val());
      var tip = parseInt($('#tip').val());
      var billTip = bill + tip;
      var billTipPeople = billTip / people;

      $('#total').text("£" + billTipPeople) 

我已將parseint添加到bill ＆ tip