点击tab时通过JavaScript修改progress值失效问题求助

问题场景 #

需求是点击每个class为et_pb_tab的Tab元素时，将id为p1的progress进度条数值增加20，但现有代码执行后进度条毫无变化。

错误原因分析 #

1. DOM元素与数值混淆：原JS代码里，var v1 = document.getElementById('p1').value;获取的是progress的当前数值，而非DOM元素本身，后续试图给这个数值设置value属性完全无效。
2. 链接默认行为干扰：Tab里的<a>标签点击会触发默认跳转（即使href是#也会滚动页面），可能中断事件逻辑执行。
3. 变量名笔误（非致命）：getElementsByClassName('et_pb_tab')存到了taps变量，正确拼写应为tabs，虽不影响运行，但易造成混淆。

修正后的代码 #

JS代码

// 修正变量名拼写，获取所有Tab元素
const tabs = document.getElementsByClassName('et_pb_tab');

// 用let避免var的变量提升问题
for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', (e) => {
    // 阻止<a>标签的默认跳转行为
    e.preventDefault();
    // 获取progress DOM元素本身
    const progressBar = document.getElementById('p1');
    // 计算新的value值，确保不超过max值（避免进度条超出100）
    const newValue = Math.min(parseInt(progressBar.value) + 20, parseInt(progressBar.max));
    // 更新进度条的value
    progressBar.value = newValue;
  });
}

CSS代码（无需修改）

li.et_pb_tab_active {
  background-color: rgba(255, 211, 14, 0.29);
}

HTML代码（无需修改）

<progress value="0" max="100" id="p1"></progress>

<ul class="et_pb_tabs_controls">
  <li class="et_pb_tab et_pb_tab_active"><a href="#">Clase N° 1</a></li>
  <li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 2</a></li>
  <li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 3</a></li>
  <li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 4</a></li>
  <li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 5</a></li>
</ul>

关键修改说明 #

• 直接获取progress元素对象，而非它的value值，才能正确修改其属性。
• 添加e.preventDefault()阻止链接默认行为，确保点击Tab时只执行进度条更新逻辑。
• 用Math.min()限制进度条数值不超过max值（100），避免出现超出范围的无效数值。
• 循环里的var换成let，避免闭包导致的变量绑定问题，符合现代JS规范。

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