javascript - 代码计算百分比的问题

Question

我有3盒。一个已经在计算分数，一个是可能的总分，然后第三个框应该计算这两个数字的百分比。

我从 jsfiddle.net 上的某人那里复制了此内容，将其合并到我的 HTML 模板中，但无法使其正常工作

(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(1);
    }

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

<DIV>
  <INPUT id=pointsgiven title="" style="MARGIN: auto" accessKey="" name=pointsgiven ex_ctrlid="pointsgiven" ex_ctrltype="TextField">
  <INPUT id=pointspossible title="" style="MARGIN: auto" accessKey="" name=pointspossible ex_ctrlid="pointspossible" ex_ctrltype="TextField">
  <DIV>
    <INPUT disabled id=pointsperc title="" style="MARGIN: auto" accessKey="" name=pointsperc ex_ctrlid="pointsperc" ex_ctrltype="TextField">
  </DIV>
</DIV>

<DIV></DIV>

百分比根本没有上升。如果您得到 50 分(满分 50 分)，那么您的百分比就是 100%

Answer 1

$(function() { 是文档就绪事件处理程序，$ 是 jQuery 的别名，因此它可以是 jQuery(function() { 或 jQuery(document)ready(function() { (前者是首选)

必须包含 jQuery 库才能使用 jQuery。

请注意，我们还可以使用更少的代码

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

或者

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

或者甚至只是将函数名称放入

$('#pointspossible,#pointsgiven').on('input', calculate)

$(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(1);
    }

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<DIV>
  <INPUT id=pointsgiven title="" style="MARGIN: auto" accessKey="" name=pointsgiven ex_ctrlid="pointsgiven" ex_ctrltype="TextField">
  <INPUT id=pointspossible title="" style="MARGIN: auto" accessKey="" name=pointspossible ex_ctrlid="pointspossible" ex_ctrltype="TextField">
  <DIV>
    <INPUT disabled id=pointsperc title="" style="MARGIN: auto" accessKey="" name=pointsperc ex_ctrlid="pointsperc" ex_ctrltype="TextField">
  </DIV>
</DIV>

<DIV></DIV>