Javascript toFixed不起作用[重复]答案

【问题标题】：Javascript toFixed not working [duplicate]Javascript toFixed不起作用[重复]
【发布时间】：2017-04-23 10:38:30
【问题描述】：

请参阅下面的代码。它应该从输入中添加和减去 0.1。但是，当我单击 + 按钮时，它会在 toFixed(2) 函数上出错。为什么这不起作用，当 - 按钮起作用时？

这是我在jsfiddle 中的代码。

HTML：

        <div class="input-group">
            <span class="input-group-btn">
                <button type="button" class="iLiter-left-minus btn btn-lg btn-info btn-number" data-type="minus" data-field="">-
                </button>
            </span>
            <input type="number" id="iLiter" class="form-control input-number input-lg" value="0.4" min="0.1" max="10">
            <span class="input-group-btn">
                <button type="button" class="iLiter-right-plus btn btn-lg btn-info btn-number" data-type="plus" data-field="">
                    +
                </button>
            </span>
        </div>

JavaScript：

        $('.iLiter-right-plus').click(function (e) {
            e.preventDefault();
            var quantity = parseFloat($('#iLiter').val());
            quantity = quantity.toFixed(2);
            if (quantity < 10.0) {
                quantity = quantity + 0.1;
                quantity = quantity.toFixed(2);
                $('#iLiter').val(quantity);
            }
        });
        $('.iLiter-left-minus').click(function (e) {
            e.preventDefault();
            var quantity = parseFloat($('#iLiter').val());
            quantity = quantity.toFixed(2);
            if (quantity > 0.1) {
                quantity = quantity - 0.1;
                quantity = quantity.toFixed(2);
                $('#iLiter').val(quantity);
            }
        });

【问题讨论】：

toFixed 将Number 转换为String developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
这应该有助于stackoverflow.com/questions/15762768/…

标签： javascript html

【解决方案1】：

试试

quantity = +quantity + 0.1;

和

quantity = +quantity - 0.1; //(here + is optional)

在代码中的相应位置。它不适用于“+”按钮，因为“+”也意味着字符串连接，"string" + number 的结果是字符串"stringnumber"，并且字符串没有“toFixed”方法（因为它反映在控制台错误中message) 而“-”运算符将字符串 quantity 转换为数字，一切都按预期工作。

【讨论】：

哦，我明白了。我将使用马丁的答案，但现在减号起作用的原因是有道理的。谢谢！

【解决方案2】：

我们试试

quantity = Number(quantity) + 0.1;

【讨论】：

【解决方案3】：

请将您的 Javascript 源代码更改为这样的

        $('.iLiter-right-plus').click(function (e) {
            e.preventDefault();
            var quantity = parseFloat($('#iLiter').val());
            quantity = parseFloat(quantity.toFixed(2));
            if (quantity < 10.0) {
                quantity = quantity + 0.1;
                quantity = quantity.toFixed(2);
                $('#iLiter').val(quantity);
            }
        });
        $('.iLiter-left-minus').click(function (e) {
            e.preventDefault();
            var quantity = parseFloat($('#iLiter').val());
            quantity = parseFloat(quantity.toFixed(2));
            if (quantity > 0.1) {
                quantity = quantity - 0.1;
                quantity = quantity.toFixed(2);
                $('#iLiter').val(quantity);
            }
        });

当你使用.toFixed => 你的quantity 将是一个字符串。所以下一个.toFixed 将不起作用，因为.toFixed 只能使用数字

【讨论】：

【解决方案4】：

您正在将浮点数（您刚刚使用parseFloat() 解析）转换回带有toFixed(2) 的字符串。对于 + 运算符，您传递给它的内容类似于 0.50.1，它不是有效的数字字符串（因此调用 '0.50.1'.toFixed(2) 时出错）。

只调用一次.toFixed，在更新 HTML 值之前（而不是在使用值之前）：

$('.iLiter-right-plus').click(function (e) {
  e.preventDefault();
  var quantity = parseFloat($('#iLiter').val());
  if (quantity < 10.0) {
    quantity = quantity + 0.1;
    quantity = quantity.toFixed(2);
    $('#iLiter').val(quantity);
  }
});
$('.iLiter-left-minus').click(function (e) {
  e.preventDefault();
  var quantity = parseFloat($('#iLiter').val());
  if (quantity > 0.1) {
    quantity = quantity - 0.1;
    quantity = quantity.toFixed(2);
    $('#iLiter').val(quantity);
  }
});

在此处更新小提琴：https://jsfiddle.net/2fq6bhxs/2/

【讨论】：