javascript - HTML 输入不允许从键盘输入两位数

Question

我正在制作 basic calculator到目前为止它“有效”。用户只能从键盘输入一个数字。如果他们想使用两位数，他们将不得不使用文本框中的箭头。我怎样才能让用户输入两位数？如果用户尝试输入两位数，则仅存储第二个数字(因此输入 25 将仅存储 5)

// Base Variables
let result = 0;
let numb1 = 0;
let numb2 = 0;
let firstNumberEntered = false;

//This will be rewritten
let calculationDescription = `${numb1} + ${numb2}`;

document.querySelector('#input-number').addEventListener('keypress', numbersInput);

function numbersInput(e) {
  if (!firstNumberEntered && e.key === 'Enter') {
    numb1 = document.getElementById("input-number").value;
    firstNumberEntered = true;
    document.getElementById("input-number").innerHTML = "";
  } else if (firstNumberEntered && e.key === 'Enter') {
    numb2 = document.getElementById("input-number").value;
    firstNumberEntered = false;
    console.log(`${numb1} and ${numb2}`);
  }
  document.getElementById("input-number").value = "";
}

document.querySelector("#btn-add").addEventListener('click', sumNumbs);
document.querySelector("#btn-subtract").addEventListener('click', subtractNumbs);
document.querySelector("#btn-multiply").addEventListener('click', multiplyNumbs);
document.querySelector("#btn-divide").addEventListener('click', divideNumbs);

function sumNumbs() {
  let numb1Final = parseInt(numb1);
  let numb2Final = parseInt(numb2);
  result = numb1Final + numb2Final;
  calculationDescription = `${numb1} + ${numb2}`;
  outputResult(result, calculationDescription);
}

function subtractNumbs() {
  let numb1Final = parseInt(numb1);
  let numb2Final = parseInt(numb2);
  result = numb1Final - numb2Final;
  calculationDescription = `${numb1} - ${numb2}`;
  outputResult(result, calculationDescription);
}

function multiplyNumbs() {
  let numb1Final = parseInt(numb1);
  let numb2Final = parseInt(numb2);
  result = numb1Final * numb2Final;
  calculationDescription = `${numb1} x ${numb2}`;
  outputResult(result, calculationDescription);
}

function divideNumbs() {
  let numb1Final = parseInt(numb1);
  let numb2Final = parseInt(numb2);
  result = numb1Final / numb2Final;
  calculationDescription = `${numb1} / ${numb2}`;
  outputResult(result, calculationDescription);
}

<section id="calculator">
  <input type="number" id="input-number" />
  <div id="calc-actions">
    <button type="button" id="btn-add">+</button>
    <button type="button" id="btn-subtract">-</button>
    <button type="button" id="btn-multiply">*</button>
    <button type="button" id="btn-divide">/</button>
  </div>
</section>

这一切所做的就是抓取 HTML 页面上的元素并将它们放入变量并将信息发回以显示

const userInput = document.getElementById('input-number');
const addBtn = document.getElementById('btn-add');
const subtractBtn = document.getElementById('btn-subtract');
const multiplyBtn = document.getElementById('btn-multiply');
const divideBtn = document.getElementById('btn-divide');

const currentResultOutput = document.getElementById('current-result');
const currentCalculationOutput = document.getElementById('current-calculation');

function outputResult(result, text) {
  currentResultOutput.textContent = result;
  currentCalculationOutput.textContent = text;
}

不确定是否有必要提供我的 CSS，但请告诉我，我会进行更改。

我最近才开始学习 JavaScript。我在 Udemy 教程中观看了几个关于执行此元素的视频，但我停止观看并试图自己弄清楚其余部分。

我尝试做的是将 maxlength="6" 添加到我的 HTML 输入元素中，但这没有用。

Answer 1

    function numbersInput(e) {
    if(!firstNumberEntered && e.key === 'Enter') {
        numb1 = document.getElementById("input-number").value;
        firstNumberEntered = true;
        document.getElementById("input-number").innerHTML = "";
      document.getElementById("input-number").value = "";
    }
    else if(firstNumberEntered && e.key === 'Enter') {
        numb2 = document.getElementById("input-number").value;
        firstNumberEntered = false;
        console.log(`${numb1} and ${numb2}`);
    document.getElementById("input-number").value = "";

    }

}

添加 document.getElementById("input-number").value = ""; 到两个 if 语句的末尾并从函数末尾删除