如何将输入字段行调整为 Javascript 中的数字？

Question

I´m programming a math game where user has to transform a decimal digit into binary digit by dividing with 2. I wanted to adjust the rows to the length of the binary digit (eg 8 is 1000, so it shall only generate 4 rows to transform digit in a binary digit). I use display() to generate a digit from 1-31, deciToBin() to convert decimal to binary and createBoxes() to adjust rows to the length of binary digit. But it only works for the first round. If I continue playing there are more rows than the length of the binary digit or less rows than the length of the binary digit.

my Code:

let checkAnswerButton = document.getElementById("check");
let input = document.getElementById("input");
let userInput = document.getElementById("userInput");
let deziInput = document.getElementsByClassName("deziInput");
let score = document.getElementById("score");
let user_score = 0;
let count_down = 15;
let count_down_element = document.getElementById("countDown");
count_down_element.innerHTML = count_down;

let inputted = false;
let running = false;

/**
 * GameOver Panel
 */
let gameOver = document.getElementById("gameover");
let gameOverScore = document.getElementById("gameoverinfo");
let gameoverVersuch = document.getElementById("btn-versuch");
let gameoverVerlassen = document.getElementById("btn-verlassen");
let gameOverSound = document.getElementById("gameOverSound");

//Inputfelder
let digitOne = document.getElementById("digit1");
let digitTwo = document.getElementById("digit2");
let digitThree = document.getElementById("digit3");
let digitFour = document.getElementById("digit4");
let digitFive = document.getElementById("digit5");

let resultOne = document.getElementById("result1");
let resultTwo = document.getElementById("result2");
let resultThree = document.getElementById("result3");
let resultFour = document.getElementById("result4");

let inputBoxTwo = document.getElementById("inputBox2");
let inputBoxThree = document.getElementById("inputBox3");
let inputBoxFour = document.getElementById("inputBox4");
let inputBoxFive = document.getElementById("inputBox5");
let resultFive = document.getElementById("result5");

function isGameOver() {
  count_down = 0;
  gameOver.style.display = "block";
  gameOverScore.innerHTML =
    "Game Over! <br> Dein Score beträgt: " + `${user_score}`;

  document.getElementById("check").disabled = true;
  document.getElementById("userInput").disabled = true;
  document.getElementById("userInput").style.backgroundColor = "white";
  document.getElementById("gameOverSound").play();
}

function refreshPage() {
  window.location.reload();
}

gameoverVersuch.addEventListener("click", refreshPage);

function randomNum() {
  return Math.ceil(Math.random() * 31);
}

randomNum();
inputstart();

let inputboxes = document.getElementsByClassName("inputBoxes");

function createBoxes(value) {
  for (var i = 0; i < value; i++) {
    inputboxes[i].style.visibility = "visible";
  }
}

function display() {
  let number = randomNum();
  input.value = number;
  digitOne.value = input.value;
  document.getElementById("check").disabled = true;
  checkAnswerButton.style.backgroundColor = "grey";
  createBoxes(deciToBin(number).length);
}
display();

resultOne.addEventListener("input", () => {
  digitTwo.value = resultOne.value;
});
resultTwo.addEventListener("input", () => {
  digitThree.value = resultTwo.value;
});
resultThree.addEventListener("input", () => {
  digitFour.value = resultThree.value;
});
resultFour.addEventListener("input", () => {
  digitFive.value = resultFour.value;
});

userInput.addEventListener("input", () => {
  document.getElementById("check").disabled = false;
  checkAnswerButton.style.backgroundColor = "royalblue";
});

function deciToBin(decimal) {
  let binary = "";
  while (decimal > 0) {
    if (decimal & 1) {
      binary = "1" + binary;
    } else {
      binary = "0" + binary;
    }
    decimal = decimal >> 1;
  }
  return binary;
}

function validate() {
  let correct_answer = deciToBin(eval(input.value));
  let user_value = parseFloat(userInput.value);

  if (correct_answer == user_value) {
    display();
    user_score++;
    count_down += 15;
    score.innerHTML = `Score: <br> ${user_score}`;
  } else {
    //alert(`Incorrect, it was ${correct_answer}`);
    isGameOver();
    count_down_element = false;
    //display();
    //user_score--;
    //core.innerHTML = `Score: ${user_score}`;
    if (user_score < 0) {
      // alert("gameOver!");
      user_score = 0;
      score.innerHTML = 0;
      count_down_element = false;
      isGameOver();
      //location.reload();
    }
  }
  userInput.value = "";
}

function runInterval() {
  let timerInterval = setInterval(() => {
    count_down -= 1;
    count_down_element.innerHTML = count_down;

    if (count_down == 10) count_down_element.style.color = "yellow";

    if (count_down == 0) {
      isGameOver();
      display();
      count_down_element = 0;
      //location.reload();
    }
  }, 1000);
}

checkAnswerButton.addEventListener("click", validate);
checkAnswerButton.addEventListener("click", clearInput);

function inputstart() {
  for (var i = 0; i < deziInput.length; i++) {
    deziInput[i].addEventListener("keyup", () => {
      inputted = true;

      if (inputted && !running) {
        runInterval();
        running = true;
      }
    });
  }
  running = false;
}
function clearInput() {
  for (var i = 0; i < deziInput.length; i++) {
    deziInput[i].value = "";
  }
}

Answer 1

Two observations:

• I'm not seeing anywhere that you're ever setting any inputboxes.style.visibility to hidden . Seems like they should perhaps all get hidden before each new number sets up its boxes (kind of a "reset"). Otherwise, the way it is now, if the first number is 30 you'll display 5 boxes, and if the next number is 1, you'll still display five boxes, because the last four are still visibility:visible .
• I think you could replace createBoxes(deciToBin(number).length) with createBoxes((number).toString(2).length) and just get rid of deciToBin() . toString() is standard and fast.