在 javascript 中查找数组的总和

你正在"求和"字符串变量，所以Javascript正在连接它们。

您需要将它们转换为数字才能获得算术总和：

function calculate() {
        var numbers = [
            document.getElementById("num_one").value ,
            document.getElementById("num_two").value ,
            document.getElementById("num_three").value 
        ];
        var sum = Number(numbers[0]) + Number(numbers[1]) + Number(numbers[2]);
        document.getElementById("display_sum").innerHTML = sum;
        }

使用 parseFloat() 、 parseInt() 或 Number() 解析字符串，以将其转换为数字。否则+只会做字符串连接，因为值是字符串。

function calculate() {
  var numbers = [
    document.getElementById("num_one").value,
    document.getElementById("num_two").value,
    document.getElementById("num_three").value
  ];
  var sum = parseFloat(numbers[0]) + parseFloat(numbers[1],) + parseFloat(numbers[2]);
  document.getElementById("display_sum").innerHTML = sum;
}

function calculate() {
  var numbers = [
    document.getElementById("num_one").value,
    document.getElementById("num_two").value,
    document.getElementById("num_three").value
  ];
  var sum = Number(numbers[0]) + Number(numbers[1]) + Number(numbers[2]);
  document.getElementById("display_sum").innerHTML = sum;
}

function calculate() {
  var numbers = [
    document.getElementById("num_one").value,
    document.getElementById("num_two").value,
    document.getElementById("num_three").value
  ];
  var sum = parseInt(numbers[0], 10) + parseInt(numbers[1], 10) + parseInt(numbers[2], 10);
  document.getElementById("display_sum").innerHTML = sum;
}

value属性为 string 。为了在算术运算中使用它，您需要将其解析为整数。在JS中执行此操作的最简单方法是+x。 您可以使用Array.prototype.map和Array.prototype.reduce来简化操作：

var ids = ['num_one', 'num_two', 'num_three'];
var sum = ids
    .map(function(x) { return +document.getElementById(x).value; })
    .reduce(function(a,b) { return a+b; }, 0);

通过这种方式，您将能够以最少的更改将新元素引入计算中。

.value返回String您需要将其转换为 Number ，

您可以使用 parseInt 或 parseFloat(如果您有浮点值(或Number()或只是在值之前添加+

var numbers = [
    +document.getElementById("num_one").value,
    +document.getElementById("num_two").value,
    +document.getElementById("num_three").value
];

或

var numbers = [
   Number(document.getElementById("num_one").value),
   Number(document.getElementById("num_two").value),
   Number(document.getElementById("num_three").value)
];

或

var numbers = [
   parseInt(document.getElementById("num_one").value, 10),
   parseInt(document.getElementById("num_two").value, 10),
   parseInt(document.getElementById("num_three").value, 10)
];

最短的方法是使用Array.prototype.map

map() 方法创建一个新数组，其中包含在此数组中的每个元素上调用提供的函数的结果。

与Number结合使用

Number JavaScript 对象是一个包装器对象，允许您使用数值。数字对象是使用 Number(( 构造函数创建的。

数字对象的主要用途是：

• 如果参数无法转换为数字，则返回 NaN。
• 在非构造函数上下文中(即，没有 new 运算符(，Number 可用于执行类型转换。

然后Array.prototype.reduce

reduce() 方法对累加器和数组的每个值(从左到右(应用函数，以将其减少到单个值。

结合回调，例如

function (a, b) {
    return a + b;
}

一起在一行中包装您的代码：

function calculate() {
    var numbers = [
            document.getElementById("num_one").value,
            document.getElementById("num_two").value,
            document.getElementById("num_three").value
        ],
        sum = numbers.map(Number).reduce(function (a, b) { return a + b; });
    document.getElementById("display_sum").innerHTML = sum;
}

es6 一行中的可扩展解决方案：

var sum = numbers.reduce((a, b) => Number(a) + Number(b), 0);

确保在末尾包含一个initialValue - 它将保证执行回调，并且在数组不包含任何值/一个值的情况下返回一个数字。

有关减少的更多信息

根据输入的数字是整数还是小数，您可以使用parseInt或parseFloat。

已经有很多合理的答案，但这里有一个简洁的速记替代方案：

var sum = +numbers[0] + +numbers[1] + +numbers[2];

我认为您可以使用数组来存储输入，例如

<script>
var numbers;
function push(){
  numbers.push(getDocumentById("someid").val;
}

function calculate(){
  var sum=0;
  for(i=0; i<numbers.len; i++){
    sum=sum + numbers[i];
  }
    alert(sum);
}
</script>
<div>
  <button id="someid" value=20 onClick="addToArray();">click to push</button>
</div>
<div>
  <button id="calc" onClick="calculate();">click to calculate</button>
</div>

下面将解决问题：

function calculate() {
var numbers = [
    +(document.getElementById("num_one").value) ,
    +(document.getElementById("num_two").value) ,
    +(document.getElementById("num_three").value) 
];
var sum = numbers[0] + numbers[1] + numbers[2];
document.getElementById("display_sum").innerHTML = sum;
}

默认情况下，javascript 将input值视为字符串。因此，您必须手动将它们转换为如下所示integers：

var numbers = [
    document.getElementById("num_one").value ,
    document.getElementById("num_two").value ,
    document.getElementById("num_three").value 
];
document.getElementById("display_sum").innerHTML =
    numbers
        .reduce(function(sum, element) { return sum + parseInt(element, 10);}, 0);

这段代码的好处是，如果你需要计算三个以上的元素，你只需要修改你的numbers数组。