如何解决自制评分计算器输入数字后显示undefined的问题？

嘿，我来帮你搞定这个评分计算器的问题！你看到的undefined是因为代码里几个关键细节没处理对，咱们一步步修正：

问题根源拆解 #

• 你通过document.getElementById获取的是DOM元素对象，不是用户输入的数值，必须用.value才能拿到输入框里的内容，而且要转成数字类型（比如Number()），不然字符串直接运算会出错。
• 没必要用eval，直接做数值计算更安全可靠，eval不仅冗余还存在安全风险。
• 最后你写了gradePercentage.value，但gradePercentage是计算出来的数值，它没有.value属性，直接用变量本身就行。
• 额外建议：加个简单的输入校验，避免用户输入非数字或空值时出现NaN（非数字）的尴尬情况。

修正后的完整代码 #

<script>
function Calc() {
    // 获取输入框的数值，转成数字类型
    var grade = Number(document.getElementById("grade").value);
    var totalGrade = Number(document.getElementById("totalGrade").value);
    
    // 校验输入是否有效（非数字或总分不能为0）
    if (isNaN(grade) || isNaN(totalGrade) || totalGrade === 0) {
        document.getElementById("result").innerHTML = "请输入有效的数字，且总分不能为0！";
        return;
    }
    
    // 计算百分比
    var gradePercentage = (grade / totalGrade) * 100;
    // 保留两位小数输出，显示更美观
    document.getElementById("result").innerHTML = gradePercentage.toFixed(2) + "%";
}
</script>

<input type="text" id="grade" style="width:50px" autocomplete="off"> / 
<input type="text" id="totalGrade" style="width:50px" autocomplete="off"> 
<br><br>
<input type="button" value="Calculate" onClick="Calc()">
<p id="result" name="r1"></p>

关键修改说明 #

1. 用Number()把输入的字符串转成数字，确保数学运算能正常执行。
2. 移除了冗余且不安全的eval，直接进行除法和乘法运算。
3. 去掉了错误的.value调用，直接使用计算出的gradePercentage数值，还加了toFixed(2)保留两位小数，让结果显示更规范。
4. 增加了输入校验逻辑，当用户输入无效内容时给出明确提示，提升了整体的用户体验。

内容的提问来源于stack exchange，提问作者Zain Wilson - WCH Student