如何用JavaScript获取并修改Bootstrap进度条的aria-valuenow值

• 元素获取逻辑完全失效：document.getElementsByClassName('progress')返回类数组结构的HTMLCollection，不存在.value()方法；且进度条的进度属性绑定在内部.progress-bar子元素上，而非外层.progress容器，定位的DOM节点本身就不对
• 类型混用错误：将DOM元素对象直接作为数值做加法运算，运算结果为非数字值，无法实现进度累加
• 缺少渲染同步：没有将更新后的进度值同步到DOM的对应属性与样式上，既无法被辅助设备识别，也无法触发Bootstrap进度条的视觉更新

1. 初始化正确的DOM引用与进度变量 #

在事件绑定前获取目标元素，单独维护独立的数值型进度变量，避免直接操作DOM对象：

// 定位内部的progress-bar元素，取类数组中第一个匹配节点
const progressBarEl = document.getElementsByClassName('progress-bar')[0];
// 从初始aria属性读取初始进度值，转为数字类型单独存储
let progressValue = parseInt(progressBarEl.getAttribute('aria-valuenow')) || 0;

2. 重构点击事件中的进度更新逻辑 #

每次点击推进步骤时，完成进度值累加、无障碍属性同步、视觉宽度更新三个操作：

button[1].onclick = () => {
  current_step++;
  // 进度值累加，设置100为上限避免超出最大值
  progressValue = Math.min(progressValue + 25, 100);
  // 同步更新无障碍属性，保证屏幕阅读器可正确识别进度
  progressBarEl.setAttribute('aria-valuenow', progressValue);
  // 同步更新元素宽度，匹配Bootstrap进度条的视觉渲染规则
  progressBarEl.style.width = `${progressValue}%`;

  let previous_step = current_step - 1;
  if(( current_step > 0) && (current_step <= 4)){
    button[0].style.display = "inline-block";
    step[current_step].style.display = "block";
    step[previous_step].style.display = "none";

    if (current_step == 4){
      button[2].style.display = "inline-block";
    }
  } else {
    if(current_step > 4){
        form.onsubmit = () => { return true }
    }
  }
}

• 不能通过修改外层.progress容器的属性来更新进度，所有进度相关的属性与样式都定义在.progress-bar子元素上
• 必须单独维护数值类型的进度变量，DOM对象无法直接参与算术运算
• 视觉宽度和aria属性需要同步更新，否则会出现无障碍信息与视觉展示不一致的问题

内容的提问来源于stack exchange，提问作者user15543394