如何使用javascript以html形式显示计算

我有一个HTML的简短表单，基本上它计算用户输入的结果。我有4节，a.1节，a.2节，b.1节，b.2节。我希望能够将a.1节的总和相加，并在小计行上显示，a.2节、b.1节和b.2节也是如此。最后，我想总结奖励的总分，并将其显示在页面顶部汇总表的总计行中。请运行我的代码，任何建议或代码片段都将不胜感激。我想维护代码的结构。我是javascript新手，希望得到一些建议来帮助我理解javascript。谢谢

var节={
第a节：0，
第b节：0，
}
//计算截面A
功能计算区段A（区段）{
设和=0；
//查询全部并查找class=“select section_a”并添加每个选定选项并将其分配到总和
document.querySelectorAll（'select.'+节）
.forEach（（输入）=>{
sum+=parseInt（input.options[input.selectedIndex].value）；
});
区段[区段]=总和；
document.getElementById（'total_'+section.）.textContent=sum；
document.getElementById（'summary_'+section.）.textContent=sum
document.getElementById（'percent_'+section）.textContent=Math.ceil（sum/8*100）+'%'；
calcRanks（）；
}
//计算B部分
功能计算区段B（区段）{
设和=0；
//查询所有并查找class=“select section_b”，然后添加每个选定选项并将其分配到总和
document.querySelectorAll（'select.'+节）
.forEach（（输入）=>{
sum+=parseInt（input.options[input.selectedIndex].value）；
});
区段[区段]=总和；
document.getElementById（'total_'+section.）.textContent=sum；
document.getElementById（'summary_'+section.）.textContent=sum
document.getElementById（'percent_'+section）.textContent=Math.ceil（sum/4*100）+'%'；
calcRanks（）；
}
函数calcRanks（）{
设sectionsArr=[]；
设keys=Object.keys（节）；
keys.forEach（（key，i）=>{
分段推送({
第节：关键，
值：节[键]，
排名：0
});
如果（i+1==键长度）{
分段排序（（a，b）=>{
返回a.value>b.value？-1:a.valuesection.value）{
sectionsArr[i].rank=lastSection.rank+1；
}
if（lastSection.value==section.value）{
sectionsArr[i].rank=lastSection.rank；
}
lastIndex=i；
}
显示等级（sectionsArr）；
}
});
}
职能部门（部门）{
节。forEach（（节）=>{
document.getElementById（'rank_'+section.section.）.textContent=section.rank+1；
});
}

类别
可能的要点
奖励分数
完成百分比
排名
A.
60
B
50
总数=
A.1节
问题1
0
2.
问题2
0
2.
小计
A.2节
问题1
0
2.
问题2
0
2.
小计
A节总计
B.1节
问题1
0
1.
问题2
0
1.
小计
B.2节
问题1
0
1.
问题2
0
1.
小计
B节.总数

我给了你一些

div

和一些

span

标签

id

属性。在您的onchange函数中，我只是获取了DDL的值，并将它们相加，得到A和B部分的单独总计。然后在表的顶部，我抓取了这两个数字，并在onchange函数中对它们进行了求和，因此每次更改值时，求和都会更新。这不是给元素赋值的最佳方法，但这应该有助于让您走上正确的轨道。希望这能有所帮助

var节={
第a节：0，
第b节：0，
}
//计算截面A
功能计算区段A（区段）{
设和=0；
//查询全部并查找class=“select section_a”并添加每个选定选项并将其分配到总和
document.querySelectorAll（'select.'+节）
.forEach（（输入）=>{
sum+=parseInt（input.options[input.selectedIndex].value）；
});
区段[区段]=总和；
document.getElementById（'total_'+section.）.textContent=sum；
document.getElementById（'summary_'+section.）.textContent=sum
document.getElementById（'percent_'+section）.textContent=Math.ceil（sum/8*100）+'%'；
calcRanks（）；
var a1Q1=document.getElementById（'a1'）。值；
var a1Q2=document.getElementById（'a2'）。值；
document.getElementById（'section_a1subTotal'）。textContent=parseInt（a1Q1）+parseInt（a1Q2）；
var a2Q1=document.getElementById（'a3'）。值；
var a2Q2=document.getElementById（'a4'）。值；
document.getElementById（'section_a2subTotal'）。textContent=parseInt（a2Q1）+parseInt（a2Q2）；
var aTotals=document.getElementById（'summary\u section\u a'）.textContent；
var bTotals=document.getElementById（'summary\u section\u b'）.textContent；
如果（原子数！==“”&&B总数！==“”）{
document.getElementById（'totalNum'）。textContent=parseInt（原子数）+parseInt（总数）；
}
}
//计算B部分
功能计算区段B（区段）{
设和=0；
//查询All和l