сложение значений в цикле

#javascript

Как можно вывести сумму всех значений между тегами в зависимости от их количества
в цикле?

например - есть 5 divов со своими значениями, и их нужно приплюсовать. Цикл, думаю,
нужен, т.к. количество блоков может меняться.

 1 
 2 
 3 
 4 
 5 


js

window.onload = function(){
    var text = document.getElementsByClassName('amount');
    for (var i = 0 ; i < text.length; i++){
        sum = ++(text[i].innerHTML);      //тут не ясно 
      console.log(sum);
      }
}        

    

Ответы

Ответ 1

Чтобы из массива значений получить одно (в этой задаче – сумму), есть замечательный
метод массива .reduce(). 

Т.к. getElementsByClassName() возвращает не массив, а некий объект NodeList, его
сначала нужно преобразовать в массив, а потом применить reduce() с функцией, которая
к «текущему» значению приплюсует значение из очередного поступившего на вход div'а.

Преобразовать массивоподобный объект в массив можно таким нехитрым трюком:

var myArray = Array.prototype.slice.call( massivoPodobnyObject)


Общий код в результате будет выглядеть так:



function pluser(){
  var els = document.getElementsByClassName('amount');
  return Array.prototype.slice.call(els).reduce( addMe, 0);
}

function addMe(p,c,i,a){
  // p - предыдущее значение общей суммы, c - очередной элемент массива
  return p + parseInt(c.textContent);
}

window.onload = function(){
  document.getElementById('total').innerHTML = '
Итого: ' + pluser() + '
';
}
 1 
 2 
 3 
 4 
 5 




Ответ 2

Первое: нужно обнулить переменную Sum чтобы было к чему прибавлять.
Второе: text[i].innerHTML это строка и надо привести ее к числу, лучше с помощью
parseInt, или функции Number

window.onload = function(){
    var text = document.getElementsByClassName('amount');
    var sum = 0;
    for (var i = 0 ; i < text.length; i++){
        sum += Number(text[i].innerHTML);      //тут не ясно 
        console.log(sum);// внутри цикла выводится - каждую итерацию
    }
    console.log(sum);// снаружи цикла выводится - один раз
}  


Пример



var text = document.getElementsByClassName('amount');
var sum = 0;
for (var i = 0; i < text.length; i++) {
  sum += Number(text[i].innerHTML); //тут не ясно 
  console.log('Элемент №', i + 1, 'Сумма:', sum); // внутри цикла выводится - каждую
итерацию
}
console.log('Итого', sum); // снаружи цикла выводится - один раз
document.getElementById('res').innerHTML = 'Итого: ' + sum;
1
2
3
4
5



Ответ 3

window.onload = function(){
    var text = document.getElementsByClassName('amount');
    for (var i = 0 ; i < text.length; i++){
        sum += +(text[i].innerHTML);      //тут не ясно 
        console.log(sum);
    }
}


Вот правильный вариант


Ответ 4

sum = ++(text[i].innerHTML);      //тут не ясно



Во-первых, один плюс стоит не там:

sum += +text[i].innerHTML;


во-вторых, будет правильнее брать текст, а не разметку:

sum += +text[i].textContent;


Ну и надо не забыть сделать где-то перед циклом

sum = 0;


Ответ 5

Если тебе нужно кол-во div'ов, то чем text.length тебя не устраивает? Это ж и есть
кол-во блоков.

Результат должен быть таким:

window.onload = function(){
    var text = document.getElementsByClassName('amount');
    for (var i = 0 ; i < text.length; i++){
        sum += parseInt(text[i].innerHTML);      //тут не ясно 
    }
    console.log(sum);
}


Ответ 6

Мои три копейки.:)

Функция работает, если браузер поддерживает textContent или innerText, то есть для
широкого круга браузеров.




Если числа в тексте могут быть не только целыми, то вы можете заменить предложение

sum += parseInt(values[i].textContent || values[i].innerText);


на

sum += Number(values[i].textContent || values[i].innerText);


Ответ 7

var text = document.getElementsByClassName('amount');
var sum = 0;  
for (var i = 0 ; i < text.length; i++){
      sum += Number(text[i].innerHTML);      //тут не ясно 
    console.log(sum);
    }