如何合并if语句实现Web计算器计算按钮的启用条件判断

问题分析 #

你的disableInputFields函数存在两个核心问题：

1. 两个独立的if语句会互相覆盖对方的设置，导致逻辑混乱。
2. 单选按钮的判断逻辑错误（将布尔值checked与字符串"true"比较），且启用/禁用的条件完全颠倒。

你需要的逻辑是：当且仅当两个输入框都有有效数字，并且选中了一个运算符单选按钮时，才启用Calculate按钮。

修正后的代码 #

替换原有的disableInputFields函数为以下代码：

function disableInputFields() {
    // 检查两个输入框是否都不为空
    const inputsFilled = calculationInput1.value.trim() !== '' && calculationInput2.value.trim() !== '';
    // 检查是否有一个运算符单选按钮被选中
    const operatorSelected = additionRadioButton.checked || subtractRadioButton.checked || multiplyRadioButton.checked || divideRadioButton.checked;
    
    // 只有两个条件都满足时，才取消按钮禁用
    calculationEventListener.disabled = !(inputsFilled && operatorSelected);
}

进一步优化（可选） #

如果想简化单选按钮的判断逻辑，可以用querySelector直接检查是否有选中的单选按钮，避免逐个判断：

function disableInputFields() {
    const inputsFilled = calculationInput1.value.trim() !== '' && calculationInput2.value.trim() !== '';
    const operatorSelected = document.querySelector('input[name="radiobruh"]:checked') !== null;
    
    calculationEventListener.disabled = !(inputsFilled && operatorSelected);
}

关键说明 #

• trim()用于排除输入框中只有空格的情况（虽然你的输入是type="number"，但保险起见还是加上）。
• !(inputsFilled && operatorSelected)表示：当两个条件都满足时，disabled设为false（按钮启用）；否则设为true（按钮禁用）。
• 单选按钮的checked属性是布尔值，直接使用即可，不需要与字符串"true"比较。

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