Поиск суммы массива в javascript

Ответ 1

Вы "суммируете" строковые переменные, поэтому 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;
        }

Ответ 2

Разбираем строку с помощью 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;
}

Ответ 3

Свойством 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);

Таким образом, вы сможете вводить новые элементы в вычисления с минимальными изменениями.

Ответ 4

.value return 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)
];

Ответ 5

Самый короткий подход - использовать Array.prototype.map

Метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента в этом массиве.

в сочетании с Number

Объект JavaScript Number - это объект-оболочка, позволяющий работать с числовыми значениями. Объект Number создается с помощью конструктора Number().

Первичное использование для объекта Number:

• Если аргумент не может быть преобразован в число, он возвращает NaN.
• В контексте неконструктора (т.е. без нового оператора) номер может использоваться для преобразования типа.

а затем 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;
}

Ответ 6

Масштабируемое решение в одной строке es6:

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

Обязательно включите initialValue в конец там - это гарантирует выполнение обратного вызова, и число возвращается в случаях, когда массив не содержит значений/одного значения.

Дополнительная информация об уменьшении

Ответ 7

В зависимости от того, являются ли ваши входные числа целыми или десятичными знаками, вы можете использовать parseInt или parseFloat.

Ответ 8

Есть уже много разумных ответов, но здесь есть аккуратная сокращенная альтернатива:

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

Ответ 9

По умолчанию 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.

Ответ 10

Я думаю, вы можете использовать массив для хранения входов, например

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

Ответ 11

Ниже будут решены следующие проблемы:

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