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

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  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!

CodePudding user response：

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  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>