划分输入时的奇怪行为

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