Progress bars value/width does not change with javascript (bootstrap)
i was trying to change the value or width (i dont know what to call it) of the bootstrap progress bar using onclick event but when i tried to change that nothing has happened so i tried to console log to see whats happening and i saw the width variable of the progress bar keeps returning as NaN. https://codepen.io/SirYido/pen/ExzWwPN
2 Replies
There are a few things I need to point out before sharing the solution:
When using Codepen, you should put JS in the JS box, and omit the
<html>, <head> and <body> tags. Those are already being rendered. If you want to import specific CSS or JS libraries, you can press the cogwheel at the top right corner of the CSS and JS boxes, respectively.
Now, as for your code:
- onclick should be for buttons, not divs.
- Since the value is provided from the aria-valuenow prop instead, you could use that, or set it elsewhere. Relying on inline style values for JS is not a good practice.
With that being said, here's a solution: https://codepen.io/erikblomqvist/pen/gOJmGLBYou can also use the semantic
<progress></progress> element instead which isn’t that bad when applying custom styles in terms of styling custom inputs; it’s a pretty simple one