如何使用JS计算分段单选表单输入字段并解决仅首段生效问题

存在的错误点 #

• mult2函数变量名错误：声明了x、y两个变量，但赋值给输入框时用了未定义的w、z变量，直接导致函数执行报错终止
• mult3函数赋值属性错误：input输入框的内容赋值需要用value属性，使用innerHTML不会生效，且两个输入框都赋值了x，逻辑错误
• HTML结构不完整：ETH区块（id="B"）缺少闭合的</div>标签，会导致DOM结构解析异常，影响元素选择
• 逻辑缺失：ETH、USDT的计算逻辑目前是写死的测试值，需要和BTC一样补充PHP输出的对应汇率变量
• 单选按钮绑定缺失：现有代码未给BTC单选按钮绑定onchange="hideA(this)"属性，切换回BTC区块时无法触发显示

修正后的完整JS代码 #

<script>
// BTC计算逻辑
function mult(value_btc) {
    const btc_rate = "<?php echo $btc_rate; ?>";
    const naira_rate = "<?php echo $naira_rate; ?>";
    const x = value_btc / btc_rate ;
    const y = value_btc * naira_rate;
    document.getElementById('btc_rate').value = x;
    document.getElementById('receive_btc').value = y;
};

// ETH计算逻辑
function mult2(value_eth) {
    // 替换为你PHP中定义的ETH对应汇率变量
    const eth_rate = "<?php echo $eth_rate; ?>";
    const naira_rate = "<?php echo $naira_rate; ?>";
    const x = value_eth / eth_rate ;
    const y = value_eth * naira_rate;
    document.getElementById('eth_rate').value = x;
    document.getElementById('receive_eth').value = y;
};

// USDT计算逻辑
function mult3(value_usdt) {
    // 替换为你PHP中定义的USDT对应汇率变量
    const usdt_rate = "<?php echo $usdt_rate; ?>";
    const naira_rate = "<?php echo $naira_rate; ?>";
    const x = value_usdt / usdt_rate ;
    const y = value_usdt * naira_rate;
    document.getElementById('usdt_rate').value = x;
    document.getElementById('receive_usdt').value = y;
};

// 区块切换逻辑
function hideA(x) {
    if (x.checked) {
        document.getElementById("A").style.display = "flex";
        document.getElementById("B").style.display = "none";
        document.getElementById("C").style.display = "none";
    }
}

function hideB(x) {
    if (x.checked) {
        document.getElementById("A").style.display = "none";
        document.getElementById("B").style.display = "flex";
        document.getElementById("C").style.display = "none";
    }
}
function hideC(x) {
    if (x.checked) {
        document.getElementById("A").style.display = "none";
        document.getElementById("B").style.display = "none";
        document.getElementById("C").style.display = "flex";
    }
}
</script>

修正后的HTML补充说明 #

1. 给BTC单选按钮补充触发事件：

<label class="btn btn-outline-primary">
    <img src="../app-assets/images/pages/btc.png" height="30" alt="BTC Logo">
    <input type="radio" name="option" onchange="hideA(this)" id="btc" value="BTC" checked>
</label>

2. 给ETH区块补充闭合标签，在ETH区块所有内容结束后添加</div>即可。

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