[英]How can I adjust inputfield rows to a number in Javascript?
我正在编写一个数学游戏,用户必须通过除以 2 将十进制数字转换为二进制数字。我想将行调整为二进制数字的长度(例如 8 是 1000,因此它只会生成 4 行以将数字转换为二进制数字)。 我使用 display() 生成 1-31 的数字,使用 deciToBin() 将十进制转换为二进制,使用 createBoxes() 将行调整为二进制数字的长度。 但它只适用于第一轮。 如果我继续播放,则行数多于二进制数字的长度或行数少于二进制数字的长度。
我的代码:
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 = "";
}
}
两个观察:
inputboxes.style.visibility
设置为hidden
。 似乎他们应该在每个新数字设置其框之前都被隐藏起来(一种“重置”)。 否则,就像现在这样,如果第一个number
是 30 你会显示 5 个框,如果下一个数字是 1,你仍然会显示五个框,因为最后四个仍然是visibility:visible
。createBoxes(deciToBin(number).length)
替换为createBoxes((number).toString(2).length)
并摆脱deciToBin()
。 toString()
是标准且快速的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.