如何将JavaScript脚本计算结果赋值给progress进度条的value属性

你预期的直接在value属性中写JS代码的方式无法实现，HTML属性不会自动执行内嵌的JS逻辑，需要通过JS操作DOM元素主动给进度条赋值，具体实现方式如下：

完整实现示例 #

<!-- 给progress标签设置唯一id，方便JS获取，max属性根据你数值的最大范围调整即可 -->
<progress id="customProgress" max="1000" value="0"></progress>
<div id="demo"></div>

<script>
// 计算你需要的数值
const calcResult = (100 + 50) * 3;
// 给demo元素赋值
document.getElementById('demo').innerHTML = calcResult;
// 给进度条的value属性赋值
document.getElementById('customProgress').value = calcResult;
</script>

如果你要先读取demo元素内的内容再赋值给进度条，可以参考下面的写法：

// 注意要将读取到的内容转为数字，避免字符串类型导致的赋值异常
const demoValue = Number(document.getElementById('demo').innerText)
document.getElementById('customProgress').value = demoValue

注意事项 #

• progress的max属性需要和你的数值范围匹配，比如你计算的数值最大为500，就把max设为500，进度条的显示比例才会正确
• 给value赋值时要确保传入的是数字类型，不要直接传入字符串，避免浏览器解析出错

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