Links should not be treated as buttons! Always use buttons for better accessibility and user experience.
To change a data attribute, you can utilize the DOM's setAttribute method. It's important to select the right element - if there are elements with the same class name, consider using
this.children.children.setAttribute()
to pinpoint the specific nested child you want to modify.
You can easily add an event listener to a link or button element (remember, buttons act as submit buttons in forms by default). Make sure to assign a function that will update the data attribute values upon interaction.
<button id="myButton">Click Me</button>
var button = document.getElementById("myButton");
button.addEventListener("click",function() {
document.getElementsByClassName("pro-bar")[0].setAttribute("data-pro-bar-percent","100");
}, false);
It's worth noting, as highlighted by @rlemon, that getElementsByClassName has limited browser support compared to querySelector. It's advisable to use the latter method for more reliable results.
document.querySelector(".pro-bar").setAttribute("data-pro-bar-percent","100");