Question

我似乎无法让这个工作，这让我疯了。我做了一个JSFiddle，我热衷于任何比我更多知识的人来看看！ http://jsfiddle.net/kLQf3/9/

基本上我要做的是让用户能够在第一个“To”字段中放置一个数字（包括逗号），即。 “60,000”，我希望这个数字显示在“From”字段中，它增加1即。 “60001”。

输入框也一样。我对JS的了解有限但是我已经有了自动更新工作，但增量一直给我NaN错误，因为包含了逗号。

window.onload = function () {
  var first = document.getElementById('firstFieldId'),
      second = document.getElementById('secondFieldId'),
      third = document.getElementById('thirdFieldId'),
      fourth = document.getElementById('fourthFieldId');

  first.onchange = function () {
    second.value = first.value;
  third.onchange = function () {
    fourth.value = third.value;
};
};
};

Answer 1

只需使用parseint或pasefloat：

window.onload = function () {
var first = document.getElementById('firstFieldId'),
  second = document.getElementById('secondFieldId'),
  third = document.getElementById('thirdFieldId'),
  fourth = document.getElementById('fourthFieldId');

first.onchange = function () {
second.value =  parseFloat(first.value)+1;
alert(second.value);
third.onchange = function () {
fourth.value = parseFloat(third.value)+1;
};
};
};

Answer 2

假设您将所需的值输入变量value ...

...删除逗号：

value = value.replace(/,/g, "");

...解析数字：

value = parseInt(value, 10); // 10 = base 10

添加一个逗号是比较棘手的，但是SO已经覆盖了：How to print a number with commas as thousands separators in JavaScript。

应用于first.onchange处理程序的示例：Updated Fiddle

first.onchange = function () {
    var value;

    // Get the value and remove the commas
    value = first.value.replace(/,/g, "");

    // Make it a number
    value = parseInt(value, 10);

    // Add one to it
    ++value;

    // Turn it back into a string
    value = String(value);

    // Put it in the other text box, formatted with commas
    second.value = numberWithCommas(value);
};

您可以一次性完成所有操作，但这会使调试变得更加困难：

first.onchange = function () {
    second.value = numberWithCommas(String(parseInt(first.value.replace(/,/g, ""), 10) + 1));
};

您对该代码存在其他一些问题，尤其是在第一次third更改之前，您不会在first上挂接您的更改处理程序。如果您一致地格式化代码，那就更明显了：

window.onload = function () {
    var first = document.getElementById('firstFieldId'),
        second = document.getElementById('secondFieldId'),
        third = document.getElementById('thirdFieldId'),
        fourth = document.getElementById('fourthFieldId');

    first.onchange = function () {
        second.value = first.value;
        third.onchange = function () {
            fourth.value = third.value;
        };
    };
};

Answer 3

window.onload = function () {
  var first = document.getElementById('firstFieldId'),
      second = document.getElementById('secondFieldId'),
      third = document.getElementById('thirdFieldId'),
      fourth = document.getElementById('fourthFieldId');

  first.onchange = function () {
    second.value = parseInt(first.value.replace(/,/g, "")) +1;
  third.onchange = function () {
    fourth.value = parseInt(third.value.replace(/,/g, "")) +1;
};
};
};

几乎是T.J.克劳德说，但这是你的小提琴链接：http://jsfiddle.net/kLQf3/17/

Javascript增加输入结果并包含逗号

3 个答案: