如何在JavaScript中根据二进制位数动态调整输入框行数？

问题根源大概率是这几个点：

• 旧输入框没清理：每次新游戏生成输入框时，之前的输入框还留在DOM里，导致行数叠加或残留
• 二进制长度算错：deciToBin()返回的结果可能带多余前缀（比如"0b"），导致长度判断不准
• 状态变量没重置：记录当前输入框数量的变量没在新游戏时更新，后续生成逻辑用了旧值

具体修复步骤 #

1. 先清旧输入框再生成新的 #

修改createBoxes()，每次生成前先清空容器里的旧元素：

function createBoxes(binaryLength) {
  const container = document.getElementById('input-container');
  container.innerHTML = ''; // 一键清空旧输入框

  for (let i = 0; i < binaryLength; i++) {
    const input = document.createElement('input');
    input.type = 'text';
    input.maxLength = 1; // 限制只能输入0或1
    container.appendChild(input);
  }
}

2. 确保二进制长度计算准确 #

检查deciToBin()，返回纯二进制字符串（不要带"0b"前缀）：

function deciToBin(num) {
  return num.toString(2); // 直接返回无前缀的二进制字符串，比如8会返回"1000"
}

// 调用流程示例
const currentNum = display(); // 生成1-31的随机数
const binaryStr = deciToBin(currentNum);
createBoxes(binaryStr.length); // 用纯二进制字符串的长度生成对应行数

3. 重置全局状态变量（如果有的话） #

如果有记录当前数字、二进制长度的全局变量，每次新游戏开始时重置：

// 全局状态示例
let currentBinaryLength = 0;

function startNewGame() {
  currentBinaryLength = 0; // 重置状态
  const newNum = display();
  const binaryStr = deciToBin(newNum);
  currentBinaryLength = binaryStr.length;
  createBoxes(currentBinaryLength);
}

额外校验：确保数字范围正确 #

确认display()确实生成1-31的整数，避免超出范围导致二进制长度异常（31的二进制是5位）：

function display() {
  return Math.floor(Math.random() * 31) + 1; // 生成1到31的随机整数
}

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