Javascript 单击更改数据属性

我想知道如何在单击时更改数据属性。我想做的是将值增加25。所以我有一个进度条和一个按钮。现在进度条的值为25。当我点击按钮时，我希望它增加到50，75，100

代码如下：

let button=document.getElementById（“btn”）；
let bar=document.getElementById（“进度条”）；
addEventListener（'click'，function（）{
log（“您单击了btn”）；
});
正文{
最大宽度：1200px；
保证金：0自动；
填充：10px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
边缘顶端：3em；
}
进展{
-webkit外观：无；
-moz外观：无；
外观：无；
宽度：100%；
高度：20px；
}
进度：：-webkit进度条{
背景色：#ccc；
宽度：100%；
}
进度：：-webkit进度值{
背景色：橙色！重要；
}
钮扣{
边缘顶部：2米；
背景：黑色；
颜色：白色；
边界：无；
填充：.5em2em；
}
按钮：悬停{
背景：#1A1A；
}

测验进度
下一个
您可以使用元素的
**值**
属性。您没有将id分配给progress元素，但您正在尝试访问它


let button=document.getElementById（“btn”）；
let bar=document.getElementById（“进度条”）；
addEventListener（'click'，function（）{
//log（“您单击了btn”）；
如果（条形值>=100）
{
巴值=100；
}
其他的
{
巴值+=25；
}
});
正文{
最大宽度：1200px；
保证金：0自动；
填充：10px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
边缘顶端：3em；
}
进展{
-webkit外观：无；
-moz外观：无；
外观：无；
宽度：100%；
高度：20px；
}
进度：：-webkit进度条{
背景色：#ccc；
宽度：100%；
}
进度：：-webkit进度值{
背景色：橙色！重要；
}
钮扣{
边缘顶部：2米；
背景：黑色；
颜色：白色；
边界：无；
填充：.5em2em；
}
按钮：悬停{
背景：#1A1A；
}

测验进度
下一个
非常感谢您的回复，这对我帮助很大！