学生成绩计算网页开发求助：JS输入校验与分数计算代码修正

原代码存在的问题： #

• 直接将DOM元素转为数字，未获取输入框的value属性，导致计算结果为NaN
• 缺少输入有效性校验（未检查输入是否为0-100之间的整数、是否为空）
• 未声明n1/n2/n3/n4变量，会意外创建全局变量
• HTML页面标题和主标题不符合要求（要求标题为"Student Grades"）
• 部分<label>的for属性与对应输入框的id不匹配，导致标签点击无法聚焦输入框

修正后的HTML代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="part1.css">
    <script src="part1.js" defer></script>
    <title>Student Grades</title>
</head>
<body>
    <header>
        <h1>Student Grades</h1>
    </header>
    <br>
    <label for="hwAverage"><b>Enter</b> Homework Average : </label>
    <input type="number" name="hwAverage" id="hwAverage" placeholder="Enter Number 0-100" min="0" max="100" required>
    <br>
    <label for="midTerm"><b>Enter</b> Mid-term exam score : </label>
    <input type="number" name="midTerm" id="midTerm" placeholder="Enter Number 0-100" min="0" max="100" required>
    <br>
    <label for="finalExam"><b>Enter</b> Final exam score : </label>
    <input type="number" name="finalExam" id="finalExam" placeholder="Enter Number 0-100" min="0" max="100" required>
    <br>
    <label for="participation"><b>Enter</b> Participation : </label>
    <input type="number" name="participation" id="participation" placeholder="Enter Number 0-100" min="0" max="100" required>
    <br>
    <br>
    <input type="button" value="SUBMIT" id="submit" class="submit">
    <br>
    <br>
    <label for="result">Result : </label>
    <div class="result" id="result"></div>
    <br>
    <br>

    <div class="rubric">
        <div class="A-tier">
            <p>90-100  |  A</p>
        </div>
        <div class="B-tier">
            <p>80-89  |  B</p>
        </div>
        <div class="C-tier">
            <p>70-79  |  C</p>
        </div>
        <div class="D-tier">
            <p>60-69  |  D</p>
        </div>
        <div class="F-tier">
            <p>0-59  |  F</p>
        </div>
    </div>
</body>
</html>

修正后的JavaScript代码： #

const calculateGrade = () => {
    // 获取输入框元素并提取value值
    const hwInput = document.querySelector('#hwAverage');
    const mtInput = document.querySelector('#midTerm');
    const feInput = document.querySelector('#finalExam');
    const partiInput = document.querySelector('#participation');
    const resultElement = document.querySelector('#result');

    // 将输入值转为整数
    const hwNum = parseInt(hwInput.value.trim(), 10);
    const mtNum = parseInt(mtInput.value.trim(), 10);
    const feNum = parseInt(feInput.value.trim(), 10);
    const partiNum = parseInt(partiInput.value.trim(), 10);

    // 输入有效性校验
    const isValidScore = (score) => {
        return !isNaN(score) && score >= 0 && score <= 100;
    };

    if (!isValidScore(hwNum) || !isValidScore(mtNum) || !isValidScore(feNum) || !isValidScore(partiNum)) {
        resultElement.textContent = '请输入0-100之间的有效整数！';
        resultElement.style.color = 'red';
        return;
    }

    // 计算最终平均分（保留1位小数）
    const finalScore = (0.5 * hwNum) + (0.2 * mtNum) + (0.2 * feNum) + (0.1 * partiNum);
    const roundedScore = finalScore.toFixed(1);

    // 显示结果
    resultElement.textContent = `最终平均分：${roundedScore}`;
    resultElement.style.color = 'black';
};

// 绑定提交按钮点击事件
document.querySelector('#submit').addEventListener('click', calculateGrade);

关键修改说明： #

1. HTML部分
   • 修正页面<title>和<h1>为要求的"Student Grades"
   • 修复<label>的for属性与输入框id不匹配的问题
   • 给输入框添加min="0"、max="100"、required属性，增强前端基础校验
2. JavaScript部分
   • 改用parseInt获取并转换输入值为整数，同时去除首尾空格
   • 添加输入校验函数，检查输入是否为0-100之间的有效整数，无效时显示错误提示
   • 所有变量使用const/let声明，避免全局变量污染
   • 计算结果保留1位小数，提升显示可读性
   • 错误提示用红色字体区分，优化用户体验

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