javascript - 如何使用 JavaScript 和 HTML 在计算表单中按升序对多个值进行排序和排名

Question

我有一个包含两个表格的小型计算表格。每个表最后都会计算一个数字。我的目标是从每个表单中获取每个总计并对每个总计进行排名。

例如，如果 A 部分的总数为 4，B 部分的总数为 5，则 A 部分的排名将为 2，B 部分的排名将为 1。

我尝试在 JavaScript 中添加一些逻辑，但仍然无法弄清楚。我想遵循 JavaScript 已有的相同格式。我是 JavaScript 新手。

如果运行代码片段显示正确，请将代码复制并粘贴到测试编辑器中。

我尝试添加逻辑并将它们放入数组中，但我仍然无法弄清楚。

function calcA1R() {
  var Aa1 = document.getElementById('Aa1');
  var Ab1 = document.getElementById('Ab1');
  var Ac1 = document.getElementById('Ac1');

  var Aa1Val = Aa1.options[Aa1.selectedIndex].value;
  var Ab1Val = Ab1.options[Ab1.selectedIndex].value;
  var Ac1Val = Ac1.options[Ac1.selectedIndex].value;

  // returning the sum of the values
  return [parseInt(Aa1Val), parseInt(Ab1Val), parseInt(Ac1Val)].reduce((a, c) => a + c, 0)
}

function calcA1() {
  // anything changes displaySum() runs
  displaySumA()

  document.getElementById("A1").innerHTML = calcA1R();
}

function displaySumA() {

  document.getElementById('totalA').textContent = calcSumA()
  document.getElementById('totalA2').textContent = calcSumA()

}

function calcSumA() {
  return calcA1R()
}

function calcB1R() {
  var Ba1 = document.getElementById('Ba1');
  var Bb1 = document.getElementById('Bb1');
  var Bc1 = document.getElementById('Bc1');
  var Bd1 = document.getElementById('Bd1');
  var Be1 = document.getElementById('Be1');

  var Ba1Val = Ba1.options[Ba1.selectedIndex].value;
  var Bb1Val = Bb1.options[Bb1.selectedIndex].value;
  var Bc1Val = Bc1.options[Bc1.selectedIndex].value;
  var Bd1Val = Bd1.options[Bd1.selectedIndex].value;
  var Be1Val = Be1.options[Be1.selectedIndex].value;

  return [parseInt(Ba1Val), parseInt(Bb1Val), parseInt(Bc1Val), parseInt(Bd1Val), parseInt(Be1Val)].reduce((a, c) => a + c, 0)

}

function calcB1() {
  // anything changes displaySum() runs
  displaySumB()
  //Adds to points awarded

}

function displaySumB() {
  document.getElementById('totalB').textContent = calcSumB()
  document.getElementById('totalB2').textContent = calcSumB()
}

function calcSumB() {
  return calcB1R()
}

<table>
  <tr>
    <td></td>
  </tr>
  <tr class="blueHead">
    <td><b>Section A</b></td>
    <td><b>Value</b></td>
    <td><b>Awarded</b></td>
  </tr>
  <tr>
    <td>Question 1</td>
    <td align="center">1</td>
    <td align="center">
      <select class="select" onChange="calcA1();" id="Aa1">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center">1</td>
    <td align="center">
      <select class="select" onChange="calcA1();" id="Ab1">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>Question 3</td>
    <td align="center">2</td>
    <td align="center">
      <select class="select" onChange="calcA1();" id="Ac1">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>

  <tr>
    <td></td>
  </tr>
  <tr class="blueHead">
    <td class="subtotal">Section A. Total</td>
    <td align="center"><b>4</b></td>
    <td align="center"><b><div><span id="totalA"></span></div></b></td>
  </tr>
</table>

<br><br><br>
<table>

  <tr>
    <td></td>
  </tr>
  <tr class="blueHead">
    <td><b>Section B</b></td>
    <td><b>Value</b></td>
    <td><b>Awarded</b></td>
  </tr>
  <tr>
    <td>Question 4</td>
    <td align="center">4</td>
    <td align="center">
      <select class="select" onChange="calcB1();" id="Ba1">
        <option value="0">0</option>
        <option value="4">4</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 5</td>
    <td align="center">2</td>
    <td align="center">
      <select class="select" onChange="calcB1();" id="Bb1">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 6 </td>
    <td align="center">2</td>
    <td align="center">
      <select class="select" onChange="calcB1();" id="Bc1">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 7</td>
    <td align="center">3</td>
    <td align="center">
      <select class="select" onChange="calcB1();" id="Bd1">
        <option value="0">0</option>
        <option value="3">3</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 8</td>
    <td align="center">2</td>
    <td align="center">
      <select class="select" onChange="calcB1();" id="Be1">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
    <tr>
      <tr class="blueHead">
        <td class="subtotal">Section B. Total</td>
        <td align="center"><b>13</b></td>
        <td align="center"><b><div><span id="totalB"></span></b></td>
      </tr>
</table>
<br><br><br>
<table border="1">
  <tr>
    <td></td>
    <td>Totals Points Earned</td>
    <td>Ranked</td>
  </tr>
  <tr>
    <td>A</td>
    <td>
      <div><span id="totalA2"></span></td>
    <td>rank goes here</td>
  </tr>
  <tr>
    <td>B</td>
    <td>
      <div><span id="totalB2"></span></td>
    <td>rank goes here</td>
  </tr>
</table>

        

Answer 1

你可以创建一个函数updateRanks，并在每次输入发生更改时调用它，即每次调用calcA1之后() 和 calcB1()。我重写了你的 javascript 代码，为你提供一个更好的例子。希望对您有所帮助。

let Aa1 = document.getElementById('Aa1')
let Ab1 = document.getElementById('Ab1')
let Ac1 = document.getElementById('Ac1')
let Ba1 = document.getElementById('Ba1')
let Bb1 = document.getElementById('Bb1')
let Bc1 = document.getElementById('Bc1')
let Bd1 = document.getElementById('Bd1')
let Be1 = document.getElementById('Be1')

function calcA1() {
  document.getElementById('totalA2').innerHTML = parseInt(Aa1.value) + parseInt(Ab1.value) + parseInt(Ac1.value)
  updateRanks()
}

function calcB1() {
  document.getElementById('totalB2').innerHTML = parseInt(Ba1.value) + parseInt(Bb1.value) + parseInt(Bc1.value) + parseInt(Bd1.value) + parseInt(Be1.value)
  updateRanks()
}

function updateRanks() {
  let totalA = parseInt(document.getElementById('totalA2').innerHTML)
  let totalB = parseInt(document.getElementById('totalB2').innerHTML)
  let rankA = document.getElementById('rank-a')
  let rankB = document.getElementById('rank-b')
  if (totalA > totalB) {
    rankA.innerHTML = 1
    rankB.innerHTML = 2
  } else if (totalA < totalB) {
    rankA.innerHTML = 2
    rankB.innerHTML = 1
  } else {
    rankA.innerHTML = 1
    rankB.innerHTML = 1
  }
}

    ...
        <td id="rank-a">rank goes here</td>
    ...
        <td id="rank-b">rank goes here</td>
    ...