0

我正在构建一个基本应用程序以了解更多信息，但遇到了一个问题。

我有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)

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

4

6 回答 6

4

你很接近。我让它像这样工作

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

于 2013-06-19T12:21:08.337 回答
2

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

在parseFloat工作parseInt时，使用一元加号运算符编写起来更短，您不必担心数字的类型：

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

只要输入值仅包含一个数字，这就会起作用。但是，如果输入仅以数字开头，例如"5 foo"，并且您想从字符串的开头提取数字，则必须使用parseIntor parseFloat。

于 2013-06-19T12:24:39.203 回答
1

您的账单和小费变量是字符串。尝试使用parseFloat()。在两个字符串上使用加号 ( + ) 只会将它们连接起来。

var bill = parseFloat($('#bill').val());
var tip = parseFloat($('#tip').val());
于 2013-06-19T12:21:05.283 回答
1

当您在一种情况下使用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！*我只在和我的女朋友在一起时给提示，否则，像我这样的人会破坏你的应用程序......

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

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

于 2013-06-19T13:00:44.803 回答
0

尝试在javascript中使用parseInt()and parseFloat()。当你没有使用这些时，它将被视为字符串。

于 2013-06-19T12:21:17.083 回答
0

尝试

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

于 2013-06-19T12:23:55.907 回答