如何通过循环获取选中的输入字段值以实现计算器功能

嘿，我来帮你搞定这个计算器的问题！针对你说的「根据第二个下拉菜单显示不同输入字段，然后只获取这些可见字段的值计算」的需求，我整理了一套完整的实现方案，结合HTML和JavaScript来做：

首先我们给不同的预定义输入组加上统一的类名和标识，方便后续控制显示隐藏和取值：

<!DOCTYPE html>
<html>
<head>
    <title>CO-Calculator</title>
    <style>
        /* 默认隐藏所有输入组，避免页面加载时混乱 */
        .input-group {
            display: none;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <!-- 第一个下拉菜单（你已有的部分） -->
    <select id="firstDropdown">
        <option value="opt1">选项1</option>
        <option value="opt2">选项2</option>
    </select>

    <!-- 第二个下拉菜单，用来切换输入组 -->
    <select id="secondDropdown">
        <option value="group1">计算组1</option>
        <option value="group2">计算组2</option>
        <option value="group3">计算组3</option>
    </select>

    <!-- 对应不同选择的输入组，用data-group和下拉选项值绑定 -->
    <div class="input-group" data-group="group1">
        <label>基础值A：</label>
        <input type="number" class="calc-input" value="15">
        <label>系数值B：</label>
        <input type="number" class="calc-input" value="2.5">
    </div>

    <div class="input-group" data-group="group2">
        <label>固定值C：</label>
        <input type="number" class="calc-input" value="50">
        <label>调整值D：</label>
        <input type="number" class="calc-input" value="10">
        <label>倍率值E：</label>
        <input type="number" class="calc-input" value="1.8">
    </div>

    <div class="input-group" data-group="group3">
        <label>单一计算值：</label>
        <input type="number" class="calc-input" value="100">
    </div>

    <button id="calcBtn">开始计算</button>
    <p id="resultArea">计算结果：</p>

    <script>
        // 下面放JavaScript逻辑
    </script>
</body>
</html>

监听第二个下拉菜单的选择变化，只展示对应的输入组，隐藏其他组：

const secondDropdown = document.getElementById('secondDropdown');
const allInputGroups = document.querySelectorAll('.input-group');

// 下拉菜单切换时触发
secondDropdown.addEventListener('change', function() {
    const selectedGroup = this.value;
    
    // 先隐藏所有输入组
    allInputGroups.forEach(group => {
        group.style.display = 'none';
    });
    
    // 找到并显示选中的输入组
    const targetGroup = document.querySelector(`.input-group[data-group="${selectedGroup}"]`);
    if (targetGroup) {
        targetGroup.style.display = 'block';
    }
});

// 页面加载时默认显示第一个组
window.addEventListener('load', function() {
    const defaultGroup = secondDropdown.value;
    const defaultTarget = document.querySelector(`.input-group[data-group="${defaultGroup}"]`);
    if (defaultTarget) {
        defaultTarget.style.display = 'block';
    }
});

给计算按钮绑定点击事件，只获取当前显示的输入字段的值，然后执行你的计算逻辑：

const calcBtn = document.getElementById('calcBtn');
const resultArea = document.getElementById('resultArea');

calcBtn.addEventListener('click', function() {
    // 筛选出当前显示的输入组里的所有输入框
    const visibleInputs = document.querySelectorAll('.input-group[style="display: block;"] .calc-input');
    
    // 收集有效数值（避免非数字干扰）
    const validValues = [];
    visibleInputs.forEach(input => {
        const numValue = parseFloat(input.value);
        if (!isNaN(numValue)) {
            validValues.push(numValue);
        }
    });

    // 这里替换成你的实际计算逻辑，比如求和、乘积或者自定义公式
    let calculationResult = 0;
    if (validValues.length > 0) {
        // 示例：求和，你可以改成自己的逻辑，比如 validValues[0] * validValues[1] 之类的
        calculationResult = validValues.reduce((sum, val) => sum + val, 0);
    }

    // 显示结果
    resultArea.textContent = `计算结果：${calculationResult}`;
});

• 如果你的计算逻辑需要区分不同的输入组，可以通过data-group属性判断当前选中的组，然后执行对应公式
• 可以给输入框添加必填校验，比如计算前检查是否有空值或者无效数字
• 要是想让样式更灵活，可以用CSS类来控制显示隐藏（比如定义.active { display: block; }，切换时给目标组加/减这个类）

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