Using jQuery with HTML5 progress bar

Question

I want to use jQuery to update the value of my progress bar that I am using.

<progress id="progBar" value="10" max="100">

I want to update this everytime someone push a button to change the value up by one but I don't know the code.

I have tried using val(15) .progressbar({ value: 15 }) but it won't update to 15.

Can someone give me a solution?

Answer 1

Demo - http://jsfiddle.net/fJxGG/1/

Both seem to work on Chrome & FF -

$('#progBar').attr('value',50);
$('#progBar').val(70);

Answer 2

$('#click').click(function() {
  // Get progress bar current value and add with 1;
  var curr_val = $('#progBar').val();
  var new_val = Number(curr_val) + 1;
  $('#progBar').val(new_val);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="click">Click me</button>
<progress id="progBar" value="10" max="100">

Answer 3

have you tried $("#progBar").attr("value", 15); ?