I'm attempting to create a function where every time the button is clicked, the progress bar increases by an extra 12.5% out of the total 100%. (Therefore, eight clicks will complete the progress bar to 100%)
Currently, it updates the text content but doesn't visibly move the progress bar.
Here's the code snippet I've written so far:
CoffeeScript
$(".mybtn").on 'click', (e) ->
valuer = $("#progBarMsg").parent().attr('value')
newVal = valuer + 12.5
e.preventDefault()
window.scrollTo(0, 0)
$("#progBarMsg").parent().css("width", newVal+'%').attr('aria-valuenow', newVal)
$("#progBarMsg").text("This is just a test")
Below is the view partial which displays the progress bar and button:
Rails Partial
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%;">
<span id="progBarMsg">Step 1 of 8</span>
</div>
</div>
<nav>
<ul class="pager">
<li class="mybtn"><a href="">Click to Update Progress Bar</a></li>
</ul>
</nav>