如何动态增加进度条的宽度

Question

我目前正在开发一个动态进度条，每次点击按钮时都会填满(意味着增加条容器内元素的宽度(，我这样做的方式是：

let btn = document.getElementById('click');
let adj = add_bar.style.width = "";
btn.addEventListener('click', ()=>{
adj = "10%";
})

我也做了一些其他的尝试，但最终都得到了同样的结果。你至少能给我一些提示吗？

谢谢

Answer 1

代码不起作用的原因是，每次单击时都将宽度设置为10%，而不是递增。

相反，使用+=:

let add_bar = document.querySelector('progress');
let btn = document.getElementById('click');
btn.addEventListener('click', function() {
add_bar.value += 10;
})

<progress value="0" min="0" max="100"></progress>
<br/>
<button id="click">Increase Progress</button>