如何在JS计算器的不同进制模式下动态禁用输入按钮？

1. 给按钮添加标识属性 #

先修改HTML里的数字、字母按钮，新增data-char属性，方便JS快速定位和判断字符：

<input type="button" value="1" onclick="AddLetter('1')" data-char="1" />
<input type="button" value="2" onclick="AddLetter('2')" data-char="2" />
<input type="button" value="3" onclick="AddLetter('3')" data-char="3" />
<input type="button" value="4" onclick="AddLetter('4')" data-char="4" />
<input type="button" value="5" onclick="AddLetter('5')" data-char="5" />
<input type="button" value="6" onclick="AddLetter('6')" data-char="6" />
<input type="button" value="7" onclick="AddLetter('7')" data-char="7" />
<input type="button" value="8" onclick="AddLetter('8')" data-char="8" />
<input type="button" value="9" onclick="AddLetter('9')" data-char="9" />
<input type="button" value="0" onclick="AddLetter('0')" data-char="0" />
<input type="button" value="A" onclick="AddLetter('A')" data-char="A" />
<input type="button" value="B" onclick="AddLetter('B')" data-char="B" />
<input type="button" value="C" onclick="AddLetter('C')" data-char="C" />
<input type="button" value="D" onclick="AddLetter('D')" data-char="D" />
<input type="button" value="E" onclick="AddLetter('E')" data-char="E" />
<input type="button" value="F" onclick="AddLetter('F')" data-char="F" />

2. 定义各进制合法字符集合 #

在JS中创建对象，存储每种进制对应的允许输入字符：

const allowedChars = {
  "Binär": ["0", "1"],
  "dezimal": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
  "hexa": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]
};

3. 编写按钮动态禁用函数 #

创建函数，根据当前选中的进制，遍历所有字符按钮并设置禁用状态：

function toggleButtonsByMode(mode) {
  const charButtons = document.querySelectorAll('input[data-char]');
  charButtons.forEach(button => {
    const char = button.dataset.char;
    button.disabled = !allowedChars[mode].includes(char);
  });
}

4. 修复并更新原单选按钮切换函数 #

原函数存在语法错误和值匹配问题，修改后加入按钮切换逻辑：

let modus = "dezimal"; // 初始化默认模式

function onclickRadio(umrechnung) {
  const display = document.getElementById("textboxDisplay");
  let displayZahl = display.value;

  // 进制转换逻辑，处理不同模式间的转换
  if (umrechnung === "Binär") {
    const base = modus === "hexa" ? 16 : modus === "Binär" ? 2 : 10;
    const decimalVal = parseInt(displayZahl, base);
    displayZahl = isNaN(decimalVal) ? "0" : decimalVal.toString(2);
    modus = "Binär";
  } else if (umrechnung === "hexa") {
    const base = modus === "Binär" ? 2 : modus === "dezimal" ? 10 : 16;
    const decimalVal = parseInt(displayZahl, base);
    displayZahl = isNaN(decimalVal) ? "0" : decimalVal.toString(16).toUpperCase();
    modus = "hexa";
  } else if (umrechnung === "dezimal") {
    const base = modus === "Binär" ? 2 : modus === "hexa" ? 16 : 10;
    const decimalVal = parseInt(displayZahl, base);
    displayZahl = isNaN(decimalVal) ? "0" : decimalVal.toString(10);
    modus = "dezimal";
  }

  display.value = displayZahl;
  // 触发按钮禁用状态切换
  toggleButtonsByMode(modus);
}

5. 初始化页面按钮状态 #

页面加载完成后，调用一次按钮切换函数，确保初始状态正确：

window.addEventListener('load', () => {
  toggleButtonsByMode(modus);
});

额外修正与优化 #

• 原HTML中Dezimal单选按钮的value有多余空格，需改为"dezimal"，保证和函数参数匹配：

<label> <input type="radio" name="Umrechnung" value="dezimal" onclick="onclickRadio('dezimal')" checked /> Dezimal </label>

• 给AddLetter函数增加合法性判断，防止非法字符输入：

function AddLetter(char) {
  if (!allowedChars[modus].includes(char)) return;
  const display = document.getElementById("textboxDisplay");
  display.value += char;
}

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