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有一些关于字符串连接的奇怪规则。＆＃34; 1＆＃34; +＆＃34; 1＆＃34; ==＆＃34; 11＆＃34;。你需要每次都明确。

parseInt GOTCHA ：始终使用parseInt的第二个（可选） base 参数。像＆＃34; 015＆＃34;否则将被解析为十进制数的八进制数。因此流行的笑话，＆＃34;为什么程序员会混淆万圣节和圣诞节？因为OCT31 == DEC25！＆＃34;

Answer 2

bill + tip将执行字符串连接，而不是添加，因为它们都是字符串。如果要执行添加，至少有一个操作数必须是数字。

虽然parseFloat和parseInt有效但使用unary plus operator的时间更短，您无需担心数字的类型：

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

这是fiddle＆gt;＆gt; 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)

我已在bill和＆amp;添加了parseint。 tip

划分输入时的奇怪行为

6 个答案: