Индикатор выполнения - циклический переход по массиву и отображению делений

Question

Застрял на этом ... Я пытаюсь создать индикатор прогресса пожертвования ... В ReactJS - но я новичок, поэтому я хочу сначала получить правильный код в Vanilla js ...

То, что я пытаюсь сделать, это перебрать массив чисел (иначе пожертвования уже отправлены через форму).Например:

[2, 5, 25] и т. Д.

Каждый раз, когда отправляется пожертвование, оно добавляется в этот массив.

Хочу, хочу, для моегоПанель пожертвований для увеличения / заполнения цвета, основанная на пожертвованиях, уже внесенных в массив.

Панель будет заполнена на 100%.Или £ 100.

Вот фрагмент JS, который у меня уже есть:

  // FUNCTION TO CALCULATE TOTAL DONATIONS
const numbers = donated.map(Number);
  function add(a, b) {
   return a + b;
}
// SUM VALUE OF NUMBERS IN THE ARRAY
const sum = numbers.reduce(add, 0);
console.log('numbers', numbers);

//THE VALUE OF NUMBERS IN ARRAY, TURNED INTO A PERCENTAGE
const total = 100;
const percentage = (sum / total) * 100;
console.log('percentage', percentage);

// LOOP THROUGH EVERY NUMBER IN THE ARRAY, AND ADD A DIV WITH A MATCHING WIDTH  
for (var i = 0; i < numbers; i++) {
  if (i < 100) {
    const div = document.createElement('div');
    div.style.background = 'red';
    div.style.width = numbers + 'px';
    div.style.height = '50px';
    div.style.float = 'left';
    document.querySelector('.bar').appendChild(div);
  }
}

Цикл работает, слегка.Первый div в массиве будет добавлен.Но когда я добавляю больше пожертвований, больше ничего не добавляется в индикатор выполнения.

В конце концов, я хочу остановиться на 100 ...

Answer 1

Работай!Мне нужно было установить числа [i] в ​​ширину моего стиля:

  for (var i = 0; i < numbers.length; i++) {
if (i < 100) {
  div +1;
  const div = document.createElement('div');
  div.style.background = 'red';
  **div.style.width = numbers[i] + 'px';**
  div.style.height = '50px';
  div.style.float = 'left';
  document.querySelector('.bar').appendChild(div);
}

}

Answer 2

Как я вижу, вы создали свой стиль с плавающей точкой влево.Это означает, что каждый div будет отображаться поверх предыдущего слева.В Chrome щелкните правой кнопкой мыши на div и щелкните левой кнопкой мыши на осмотреть.Вы увидите, что у вас есть много div, сгенерированных в вашем Dom.