Javascript 进度条-循环遍历数组和显示div

在这件事上真的被卡住了。。。我正在努力建立一个捐款进度条。。。在ReactJS中-但是我是一个初学者，所以我想在Vanilla js中首先获得正确的代码

我想做的是，通过一个数字数组循环，（也就是说，已经通过表单提交的捐款）。例如：

[2,5,25]等

每次提交捐赠时，都会将其添加到此数组中

Want I Want，是指我的捐赠栏根据阵列中已经做出的捐赠增加/填充颜色

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

//计算捐赠总额的函数
常量编号=捐赠的.map（编号）；
功能添加（a、b）{
返回a+b；
}
//数组中数字的和值
常数和=数字。减少（加，0）；
console.log（'number'，number）；
//数组中数字的值，转换为百分比
常数总数=100；
常数百分比=（总和/总数）*100；
console.log（'percentage'，percentage）；
//循环遍历数组中的每个数字，并添加一个具有匹配宽度的DIV
对于（变量i=0；i

这个循环稍微起作用。数组中的第一个div被添加。但是当我增加更多的捐款时，没有更多的div被添加到进度条中

---

最后，我想停在100…

正如我所看到的，您将div设置为左浮动。这意味着每个div将出现在左侧的上一个div上。在chrome中，右键单击div，左键单击inspect。您将看到在您的Dom中生成了许多div。

成功了！我需要在样式宽度中设置数字[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);
}

for（变量i=0；i

---

}

不，不是这样。左侧的浮动允许我的div彼此相邻，因此每次单击/捐赠时，进度条都可以填充颜色。