How to make progress bar updates automatically in real time as value changes

Question

I have a progress bar that changes based on the currentCount(I'm gonna replace it with a variable containing numbers value that will automatically increase). Currently, I set it just a static number 850 just for example. I also have input to set the target amount which currently I set to 1000(Can change anytime as we like) just for example.

Currently, the progress bar will only change every time I click the .pstbtn when setting the target amount. I want the progress bar to change automatically, in real-time based on the value changes that will happen in currentCount. To reach 100%, it should be based on the target amount that I set.

Please check out the snippet below.

$(document).ready(function() {
  $(".postbtn").on('click', function() {
    var currentCount = 850;
    var progress = (currentCount / $('#q10').val()) * 100;
    progress = (currentCount / $('#q10').val()) * 100;
    $("#myBar").width(progress + '%');
    $("#label").text(progress + '%');
  });
});

#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}

#myBar {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
}

#label {
  text-align: center;
  line-height: 30px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Total likes target:<br>
<input type="text" name="Total" id="q10" value="1000"><br> <br>
<input class="postbtn" style="width: auto; font-size: 16px;" type="button" value="Set Target">
<br><br><div id="myProgress">
  <div id="myBar">
    <div id="label">&nbsp;0%</div>
  </div>
</div>

Hope anyone could help me modify the code to achieve my aim. Thank you in advance!

Answer 1

Is this the sort of effect that you were trying to accomplish? Rather than a text input I changed it to a number and set the step property so that changes are immediately apparent ( dependant upon target number specified )

var currentCount = 850;

/* utility function that take the numeric input and calculates/displays the percentage */
const getpercentage=(i)=>{
  /* can not go beyond 100%!!! */
  var progress = Math.min( ( currentCount / i ).toFixed(2) * 100, 100 );
  $("#myBar").width( progress + '%' );
  $("#label").text( progress + '%' );
}


/*
  when the button is clicked, open 
  a dialog to set a new target. Call the
  helper to display re-calculated percentage
*/
$('.postbtn').on('click',e=>{
  let i=prompt('Set the Target',currentCount);
  if( !isNaN( i ) ){
      currentCount=i;
      getpercentage( $('#q10').val() );
    }
})



/* call the helper when the input changes */
$('#q10').on('change',(e)=>{
  getpercentage( e.target.value )
});

/* call the helper at pageload */
getpercentage( $('#q10').val() );

#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}

#myBar {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
}

#label {
  text-align: center;
  line-height: 30px;
  color: white;
}

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

<!-- for simplicity changed this to number input -->
<input type="number" name="Total" id="q10" value="1000" step=10><br> <br>
<input class="postbtn" style="width: auto; font-size: 16px;" type="button" value="Set Target">


<br><br>

<div id="myProgress">
  <div id="myBar">
    <div id="label">&nbsp;0%</div>
  </div>
</div>