JavaScript入门求助：实现表格中硫与碳输入值的自动平均值计算

需求回顾 #

• 计算硫输入框1和2的平均值，显示在只读输入框5；
• 计算碳输入框3和4的平均值，显示在只读输入框6；
• 输入框7和8的平均值显示在输入框11，输入框9和10的平均值显示在输入框12。

原代码问题分析 #

1. 重复ID：多个结果输入框使用相同的id="result"，DOM中ID必须唯一，导致只能修改第一个匹配的元素；
2. 元素获取错误：document.getElementsByName()返回元素集合，需通过索引（如[0]）获取单个元素，直接.value会报错；
3. 逻辑不完整：仅处理了第一组硫的平均值，未覆盖碳和第二组的计算；
4. 未处理异常值：输入非数字时会显示NaN，需做容错处理。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>calculate average of two students</title>
    <script>
        function calc() {
            // 第一组硫：输入框1、2 → 结果框5
            const s1 = parseFloat(document.getElementById('input1').value) || 0;
            const s2 = parseFloat(document.getElementById('input2').value) || 0;
            document.getElementById('avg-s1').value = (s1 + s2) / 2;

            // 第一组碳：输入框3、4 → 结果框6
            const c1 = parseFloat(document.getElementById('input3').value) || 0;
            const c2 = parseFloat(document.getElementById('input4').value) || 0;
            document.getElementById('avg-c1').value = (c1 + c2) / 2;

            // 第二组硫：输入框7、8 → 结果框11
            const s3 = parseFloat(document.getElementById('input7').value) || 0;
            const s4 = parseFloat(document.getElementById('input8').value) || 0;
            document.getElementById('avg-s2').value = (s3 + s4) / 2;

            // 第二组碳：输入框9、10 → 结果框12
            const c3 = parseFloat(document.getElementById('input9').value) || 0;
            const c4 = parseFloat(document.getElementById('input10').value) || 0;
            document.getElementById('avg-c2').value = (c3 + c4) / 2;
        }
    </script> 
    <style>
        table{
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
            padding: 5px;
            font-size: 14px;
            text-align: center;
        }
        th{
            border: 1px solid black;
            padding: 8px;
            font-size: 14px;
        }
        input[type="text"]{
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>%<br>Sulphur</th>
            <th>%<br>Carbon</th>
            <th>Average<br>Sulphur</th>
            <th>Average<br>Carbon</th>
        </tr>
        <tr>
            <td><input type="text" id="input1" size="3" onkeyup="calc();">1</td>
            <td><input type="text" id="input3" size="3" onkeyup="calc();">3</td>
            <td rowspan="2">
                <input type="text" id="avg-s1" size="3.5" readonly>5
            </td>
            <td rowspan="2">
                <input type="text" id="avg-c1" size="3.5" readonly>6
            </td>
        </tr>
        <tr>
            <td><input type="text" id="input2" size="3" onkeyup="calc();">2</td>
            <td><input type="text" id="input4" size="3" onkeyup="calc();">4</td>
        </tr>
        
        <tr>
            <td><input type="text" id="input7" size="3" onkeyup="calc();">7</td>
            <td><input type="text" id="input9" size="3" onkeyup="calc();">9</td>
            <td rowspan="2">
                <input type="text" id="avg-s2" size="3.5" readonly>11
            </td>
            <td rowspan="2">
                <input type="text" id="avg-c2" size="3.5" readonly>12
            </td>
        </tr>
        <tr>
            <td><input type="text" id="input8" size="3" onkeyup="calc();">8</td>
            <td><input type="text" id="input10" size="3" onkeyup="calc();">10</td>
        </tr>
    </table>
</body>
</html>

关键改动说明 #

• 统一元素标识：给每个输入框和结果框设置唯一ID，比如input1对应编号1的输入框，avg-s1对应第一组硫的平均值框；
• 容错处理：使用|| 0确保输入空值或非数字时，默认取0参与计算，避免出现NaN；
• 完整计算逻辑：分别处理四组平均值计算，覆盖所有需求；
• 样式优化：调整表格宽度、单元格内边距和输入框样式，提升可读性。

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