合并JS脚本实现多用户输入摘要展示及动态更新技术问询

嘿，你的这两个需求完全可以搞定！重复写一堆几乎一样的函数太没必要了，咱们用批量选择+统一逻辑就能把代码简化到极致，同时还能完美处理清空输入后移除汇总内容的问题。

核心思路 #

• 不用给每个输入项单独写函数，通过选择器一次性捞取所有目标输入元素
• 建立输入和结果容器的对应关系（比如test1对应result1），动态匹配不用硬写每个ID
• 输入为空时直接清空对应结果容器的内容，彻底移除之前的展示内容

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        <label>For the first test</label>
        <input type="text" placeholder="Enter Number" name="clientinfo" id="test1" required>
    </div>
    <div>
        <label>For the second test</label>
        <input type="text" placeholder="Enter Number" name="clientinfo" id="test2" required>
    </div>
    <button id="myBtn">Test</button>
    <div style="color:blue;">
        <p id="result1"></p>
    </div>
    <div style="color:red">
        <p id="result2"></p>
    </div>

    <script>
        // 统一处理所有输入项的汇总更新
        function updateSummary() {
            // 获取所有name为clientinfo的输入框
            const inputs = document.querySelectorAll('input[name="clientinfo"]');
            
            // 逐个处理每个输入框
            inputs.forEach(input => {
                const inputId = input.id;
                // 根据输入ID匹配对应的结果容器ID（testX → resultX）
                const resultId = `result${inputId.replace('test', '')}`;
                const resultElement = document.getElementById(resultId);
                const inputValue = input.value.trim(); // 去除首尾空格，避免空字符串误判
                
                if (inputValue) {
                    // 有内容时展示汇总文本
                    resultElement.textContent = `${inputId.charAt(0).toUpperCase() + inputId.slice(1)}: ${inputValue}`;
                } else {
                    // 无内容时直接清空结果容器
                    resultElement.textContent = '';
                }
            });
        }

        // 给按钮绑定点击事件
        const myBtn = document.getElementById('myBtn');
        myBtn.addEventListener('click', updateSummary, false);
    </script>
</body>
</html>

关键改进点 #

• 代码合并与复用：只用一个函数搞定所有输入项，以后再新增test3、test4这类输入，只要对应的结果容器命名为result3、result4，完全不用改JS代码
• 清空场景处理：当输入框被清空（或只输入空格）时，直接把对应结果的文本设为空，之前的内容会立即消失
• 扩展性更强：如果不想依赖ID命名规则，还可以用数据属性关联输入和结果，比如给输入框加data-result="#result1"，JS里通过input.dataset.result获取对应容器，命名更灵活

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