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

我有一个小的计算表，有两个表。每个表在末尾计算一个数字。我的目标是从每个表格中获取每个总数，并对每个总数进行排名

例如，如果A部分的总数为4，B部分为5，则A部分的秩为2，B部分的秩为1

我曾尝试在JavaScript中添加一些逻辑，但仍然无法理解。 我希望使用与JavaScript相同的格式。我是JavaScript新手

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

我尝试添加逻辑并将它们放入数组中，但仍然无法理解

函数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；
//返回值的总和
返回[parseInt（Aa1Val），parseInt（Ab1Val），parseInt（Ac1Val）]。减少（（a，c）=>a+c，0）
}
函数1（）{
//任何更改都可以运行displaySum（）
显示suma（）
document.getElementById（“A1”）.innerHTML=Calc1R（）；
}
函数displaySumA（）{
document.getElementById（'totalA'）。textContent=calcSumA（）
document.getElementById（'totalA2'）。textContent=calcSumA（）
}
函数calcSumA（）{
返回1R（）
}
函数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；
返回[parseInt（Ba1Val）、parseInt（Bb1Val）、parseInt（Bc1Val）、parseInt（Bd1Val）、parseInt（Be1Val）]。减少（（a，c）=>a+c，0）
}
函数calcB1（）{
//任何更改都可以运行displaySum（）
displaySumB（）
//增加奖励分数
}
函数displaySumB（）{
document.getElementById（'totalB'）。textContent=calcSumB（）
document.getElementById（'totalB2'）。textContent=calcSumB（）
}
函数calcSumB（）{
返回calcB1R（）
}

A节
价值
授予
问题1
1.
0
1.
问题2
1.
0
1.
问题3
2.
0
2.
A节总计
4.




B节
价值
授予
问题4
4.
0
4.
问题5
2.
0
2.
问题6
2.
0
2.
问题7
3.
0
3.
问题8
2.
0
2.
B节.总数
13




获得的总分
排列
A.
排名在这里
B
排名在这里

U只需创建一个函数

updateRanks

，并在每次

输入
更改时调用它，即每次调用
calc1（）
和
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
  }
}

让Aa1=document.getElementById（'Aa1'））
设Ab1=document.getElementById（'Ab1'）
设Ac1=document.getElementById（'Ac1'）
设Ba1=document.getElementById（'Ba1'）
设Bb1=document.getElementById（'Bb1'）
设Bc1=document.getElementById（'Bc1'）
设Bd1=document.getElementById（'Bd1'）
设Be1=document.getElementById（'Be1'）
函数1（）{
document.getElementById（'totalA2'）。innerHTML=parseInt（Aa1.value）+parseInt（Ab1.value）+parseInt（Ac1.value）
updateRanks（）
}
函数calcB1（）{
document.getElementById（'totalB2'）。innerHTML=parseInt（Ba1.value）+parseInt（Bb1.value）+parseInt（Bc1.value）+parseInt（Bd1.value）+parseInt（Be1.value）
updateRanks（）
}
函数updateRanks（）{
让totalA=parseInt（document.getElementById（'totalA2'）.innerHTML）
让totalB=parseInt（document.getElementById（'totalB2'）.innerHTML）
让rankA=document.getElementById（'rank-a'）
让rankB=document.getElementById（'rank-b'）
如果（totalA>totalB）{
rankA.innerHTML=1
rankB.innerHTML=2
}否则如果（totalA

。。。
排名在这里
...
排名在这里
...
U只需创建一个函数
updateRanks
，并在每次
输入
更改时调用它，即每次调用
calc1（）
和
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
  }
}

让Aa1=document.getElementById（'Aa1'））
设Ab1=document.getElementById（'Ab1'）
设Ac1=document.getElementById（'Ac1'）
设Ba1=document.getElementById（'Ba1'）
设Bb1=document.getElementById（'Bb1'）
设Bc1=document.getElementById（'Bc1'）
设Bd1=document.getElementById（'Bd1'）
设Be1=document.getElementById（'Be1'）
函数1（）{
document.getElementById（'totalA2'）。innerHTML=parseInt（Aa1.value）+parseInt（Ab1.value）+parseInt（Ac1.value）
updateRanks（）
}
函数calcB1（）{
document.getElementById（'totalB2'）。innerHTML=parseInt（Ba1.value）+parseInt（Bb1.value）+parseInt（Bc1.value）+parseInt（Bd1.value）+parseInt（Be1.value）
updateRanks（）
}
函数updateRanks（）{
让我们