JS表单分数计算：总分无法显示问题排查求助

我帮你揪出了代码里的几个关键问题，这就是总分无法正常显示的原因，咱们一个个来解决：

1. JavaScript语法错误 #

在给总分输入框赋值的代码行里，你多写了一个右括号，直接导致函数执行报错终止：

// 错误写法：多了一个右括号
document.getElementById('TotalMarks').value)=Total;
// 正确写法
document.getElementById('TotalMarks').value = Total;

2. 表单提交导致页面刷新 #

你用的是<input type="submit">按钮，点击后会触发表单提交，页面瞬间刷新，就算计算出了总分也会立刻消失。解决方法很简单：
把按钮类型改成button，只触发计算逻辑不提交表单：

<input type="button" value="Process" onclick="lol()">

3. HTML语法错误 #

表单标签的action属性少了等于号，不符合HTML规范（虽然不直接影响计算，但可能引发其他潜在问题）：

<!-- 错误写法 -->
<form action"">
<!-- 正确写法 -->
<form action="">

4. 未处理非数字/空输入的情况 #

如果用户输入为空或者非数字，parseInt()会返回NaN，相加后总分也会变成NaN。可以给每个parseInt加上默认值，空值或非数字自动当作0处理：

var hot1 = parseInt(document.getElementById('HOT1Marks').value) || 0;
var hot2 = parseInt(document.getElementById('HOT2Marks').value) || 0;
var assignment = parseInt(document.getElementById('AssgMarks').value) || 0;
var miniproject = parseInt(document.getElementById('MiniPMarks').value) || 0;
var finalexam = parseInt(document.getElementById('FinalMarks').value) || 0;

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
img { background-color: grey; margin:0; }
h2 { text-align : center; font : bold; }
#bod1 { margin: auto; }
table { margin: auto; width: 48%; padding: 3px; }
#tr1{ margin : 0; }
td1{ padding:2px; }
</style>
<script>
function lol() {
var hot1 = parseInt(document.getElementById('HOT1Marks').value) || 0;
var hot2 = parseInt(document.getElementById('HOT2Marks').value) || 0;
var assignment = parseInt(document.getElementById('AssgMarks').value) || 0;
var miniproject = parseInt(document.getElementById('MiniPMarks').value) || 0;
var finalexam = parseInt(document.getElementById('FinalMarks').value) || 0;
// 前面已经把所有变量转成数字了，直接相加即可，无需再用parseInt包裹
var Total = hot1 + hot2 + assignment + miniproject + finalexam;
document.getElementById('TotalMarks').value = Total;
}
</script>
</head>
<body>
<table>
<form action="">
<tr>
<td colspan="2"></td>
<td>Name : <input type="text" name="name"></td>
<td>Student ID : <input type="text" name="studentid"></td>
</tr>
<tr>
<td><b>Assessment Type</td>
<td><b>Total percentage</td>
<td><b>Total marks</td>
<td><b>Your marks</td>
<td><b>Percentage</td>
</tr>
<tr>
<td id="tr1" style=""><b>HOT #1: </td>
<td><b>15%</td>
<td><b>60</td>
<td><input type="text" id="HOT1Marks"></td>
</tr>
<tr>
<td><b>HOT #2: </td>
<td><b>10%</td>
<td><b>80</td>
<td><input type="text" id="HOT2Marks"></td>
</tr>
<tr>
<td><b>Assignment:</td>
<td><b>5%</td>
<td><b>30</td>
<td><input type="text" id="AssgMarks"></td>
</tr>
<tr>
<td><b>Mini Project:</td>
<td><b>30%</td>
<td><b>60</td>
<td><input type="text" id="MiniPMarks"></td>
</tr>
<tr>
<td><b>Final Exam:</td>
<td><b>40%</td>
<td><b>100</td>
<td><input type="text" id="FinalMarks"></td>
</tr>
<tr>
<td colspan="2"></td>
<td><b>Total Marks:</td>
<td><input type="text" id="TotalMarks"></td>
</tr>
<tr>
<td><input type="button" value="Process" onclick="lol()"></td>
<td><input type="reset" value="Reset"></td>
</tr>
</form>
</table>
</body>
</html>

内容的提问来源于stack exchange，提问作者jdope