Assign input value to Progress Bar value-CodePudding

I have 3 input of type 'text', and i want to use the last input with tag #pointsperc as a progress bar percentage value. Iam beginner in javascript but i tried to make that code but i still can't assign the percentage value of input with tag #pointsperc to progress bar function updateProgressBar(myProgressBar, 'vlaue of percentage' );

$(function() {

  $('#pointspossible').on('input', function() {
    calculate();
  });
  $('#pointsgiven').on('input', function() {
    calculate();
  });

  function calculate() {
    var pPos = parseInt($('#pointspossible').val());
    var pEarned = parseInt($('#pointsgiven').val());
    var perc = "";
    if (isNaN(pPos) || isNaN(pEarned)) {
      perc = " ";
    } else {
      perc = ((pEarned / pPos) * 100).toFixed(0);
    }

    $('#pointsperc').val(perc);
  }
});

function updateProgressBar(progressBar, value) {
  value = Math.round(value);
  progressBar.querySelector(".progress__fill").style.width = `${value}%`;
  progressBar.querySelector(".progress__text").textContent = `${value}%`;
}

const myProgressBar = document.querySelector(".progress");

/* Example */
updateProgressBar(myProgressBar, 10);

<!╌HTML code╌>
<!Doctype Html>
<Html>

<Head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <Title>Progress Bar</Title>
</Head>

<Body>

  <input type='text' id="pointspossible" value="100" />
  <input type='text' id="pointsgiven" value="80" />
  <input type='text' id="pointsperc" disabled/>


  <div >
    <div ></div>
    <span >0%</span>
  </div>
</Body>

</Html>

CodePudding user response：

calculate() should call updateProgressBar().

$(function() {

  $('#pointspossible').on('input', function() {
    calculate();
  });
  $('#pointsgiven').on('input', function() {
    calculate();
  });

  function calculate() {
    var pPos = parseInt($('#pointspossible').val());
    var pEarned = parseInt($('#pointsgiven').val());
    var perc = "";
    if (isNaN(pPos) || isNaN(pEarned)) {
      perc = " ";
      updateProgressBar(myProgressBar, 0);
    } else {
      perc = ((pEarned / pPos) * 100).toFixed(0);
      updateProgressBar(myProgressBar, perc)
    }

    $('#pointsperc').val(perc);
  }
});

function updateProgressBar(progressBar, value) {
  value = Math.round(value);
  progressBar.querySelector(".progress__fill").style.width = `${value}%`;
  progressBar.querySelector(".progress__text").textContent = `${value}%`;
}

const myProgressBar = document.querySelector(".progress");

/* Example */
updateProgressBar(myProgressBar, 10);

<!╌HTML code╌>
<!Doctype Html>
<Html>

<Head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <Title>Progress Bar</Title>
</Head>

<Body>

  <input type='text' id="pointspossible" value="100" />
  <input type='text' id="pointsgiven" value="80" />
  <input type='text' id="pointsperc" disabled/>


  <div >
    <div ></div>
    <span >0%</span>
  </div>
</Body>

</Html>