如何在用HTML编写的表单上设置排名系统，以便使用javascript对总计算值进行排名

<form id="rankingForm">
  <label for="item1">项目1：</label>
  <input type="number" id="item1" min="0" required><br>

  <label for="item2">项目2：</label>
  <input type="number" id="item2" min="0" required><br>

  <label for="item3">项目3：</label>
  <input type="number" id="item3" min="0" required><br>

  <button type="button" onclick="calculateRank()">计算排名</button>

  <h3>排名结果：</h3>
  <p id="rankingResult"></p>
</form>

function calculateRank() {
  // 获取表单
  var form = document.getElementById("rankingForm");

  // 获取所有输入字段的值
  var item1Value = parseInt(form.elements["item1"].value);
  var item2Value = parseInt(form.elements["item2"].value);
  var item3Value = parseInt(form.elements["item3"].value);

  // 存储值的数组
  var values = [item1Value, item2Value, item3Value];

  // 对值进行排序
  values.sort(function(a, b) {
    return b - a; // 降序排列
  });

  // 为每个项目分配排名值
  var rankings = {};
  for (var i = 0; i < values.length; i++) {
    var value = values[i];
    if (!rankings[value]) {
      rankings[value] = i + 1;
    }
  }

  // 更新HTML表单中的排名字段
  var rankingResult = document.getElementById("rankingResult");
  rankingResult.innerHTML = "";
  for (var j = 0; j < values.length; j++) {
    var itemValue = values[j];
    var itemRank = rankings[itemValue];
    rankingResult.innerHTML += "项目" + (j + 1) + "：排名 " + itemRank + "<br>";
  }
}