我有一个包含两个表格的小型计算表格。每个表最后都会计算一个数字。我的目标是从每个表单中获取每个总计并对每个总计进行排名。
例如，如果 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>
最佳答案
你可以创建一个函数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>
...
关于javascript - 如何使用 JavaScript 和 HTML 在计算表单中按升序对多个值进行排序和排名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57666353/