多行输入框两两求和功能实现技术求助

嘿，你现在的代码没法实现多行求和，核心问题有俩：一是重复使用了相同的ID（num1、num2、sum）——getElementById()只会返回页面里第一个匹配的元素，所以不管你改哪一行，都只会计算第一行的值；二是没找准当前输入框所属的行，全局找元素肯定不行。

其实不用额外写复杂的遍历函数，只要调整DOM结构和事件逻辑，让每个输入框只处理自己所在行的数值就行。下面是具体的修改方案：

核心调整思路 #

• 把重复的ID换成类名（ID在页面里必须唯一，类名可以重复用）；
• 给每一行的三个输入框套个容器（比如<div class="input-row">），方便快速定位同行元素；
• 在输入框的失焦事件里，通过this（当前触发事件的输入框）找到它所在的行，再从该行里取对应的数值计算。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行自动求和</title>
</head>
<body>
    <!-- 每行用div包裹，明确分组 -->
    <div class="input-row">
        <input type="text" class="num1" value="20">
        <input type="text" class="num2">
        <input type="text" class="sum" readonly> <!-- 结果框设为只读，避免手动修改 -->
    </div>
    <div class="input-row">
        <input type="text" class="num1" value="30">
        <input type="text" class="num2">
        <input type="text" class="sum" readonly>
    </div>

    <script>
        window.onload = function(){
            // 只给需要输入数值的框绑定事件（num1和num2）
            const numInputs = document.querySelectorAll('.num1, .num2');
            numInputs.forEach(input => {
                input.onblur = function(){
                    // 找到当前输入框所在的行容器
                    const currentRow = this.closest('.input-row');
                    // 获取本行的两个数值，空值默认按0处理
                    const num1 = parseFloat(currentRow.querySelector('.num1').value) || 0;
                    const num2 = parseFloat(currentRow.querySelector('.num2').value) || 0;
                    // 计算并填充到本行的结果框
                    currentRow.querySelector('.sum').value = num1 + num2;
                }
            });
        }
    </script>
</body>
</html>

关键细节说明 #

• closest('.input-row')：这个方法会向上查找最近的父级.input-row，精准定位当前输入框的所属行，不会干扰其他行的计算；
• parseFloat(...) || 0：处理输入为空或者非数字的情况，避免出现NaN的错误结果；
• readonly属性：给结果框加上这个属性，用户就不能手动修改求和结果，更符合功能逻辑；
• querySelectorAll：精准选择需要绑定事件的输入框，只给num1和num2绑定，结果框不需要绑定，节省不必要的资源消耗。

这样改完之后，每一行的输入框都会独立计算，只要你离开输入框（失焦），本行的求和结果就会自动填充啦～

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