Javascript 如何使键盘在计算器中工作

我想编写一个简单的计算器，它在点击数字和运算符时运行良好，但当我想添加键盘时，它变得有点复杂。键盘实际上可以工作。如果您按下一个键，它会出现在显示屏上，让您进行操作，但如果您混合按键并单击它的错误。 如果您正在单击并按键，则新号码将替换上一个号码，而不是将其自身添加到其他号码中。此外，如果您先按一个操作员，然后按一个数字，则该数字将与另一个操作员一起显示。如果按下键并开始单击，也会发生同样的情况

const $display = document.querySelector(".textview");
const $uno = document.querySelector(".uno");
const $dos = document.querySelector(".dos");
const $tres = document.querySelector(".tres");
const $cuatro = document.querySelector(".cuatro");
const $cinco = document.querySelector(".cinco");
const $seis = document.querySelector(".seis");
const $siete = document.querySelector(".siete");
const $ocho = document.querySelector(".ocho");
const $nueve = document.querySelector(".nueve");
const $cero = document.querySelector(".cero");
const $punto = document.querySelector(".punto");
const $sumar = document.querySelector(".sumar");
const $restar = document.querySelector(".restar");
const $multiplicar = document.querySelector(".multiplicar");
const $dividir = document.querySelector(".dividir");
const $igual = document.querySelector(".igual");
const $limpiar = document.querySelector(".limpiar");
const $borrar = document.querySelector(".borrar");
const $calculadora = document.querySelector(".calculadora")

$calculadora.addEventListener("click", operar)
document.body.addEventListener("keypress", operar)

function operar(event){
    let target = event.target;
    let key = event.key;
    
    if(target === $uno || $dos || $tres || $cuatro || $cinco || $seis || $siete || $ocho ||
        $nueve || $cero || $punto || $sumar || $restar || $multiplicar || $dividir ||
        $igual ||$limpiar || $borrar){
        switch(target){
            case $uno: $display.value = $display.value + $uno.value
            break
            case $dos: $display.value = $display.value + $dos.value
            break
            case $tres: $display.value = $display.value + $tres.value
            break
            case $cuatro: $display.value = $display.value + $cuatro.value
            break
            case $cinco: $display.value = $display.value + $cinco.value
            break
            case $seis: $display.value = $display.value + $seis.value
            break
            case $siete: $display.value = $display.value + $siete.value
            break
            case $ocho: $display.value = $display.value + $ocho.value
            break
            case $nueve: $display.value = $display.value + $nueve.value
            break
            case $cero: $display.value = $display.value + $cero.value
            break
            case $punto: $display.value = $display.value + $punto.value
            break
            case $sumar: $display.value = $display.value + $sumar.value
            break
            case $restar: $display.value = $display.value + $restar.value
            break
            case $multiplicar: $display.value = $display.value + $multiplicar.value
            break
            case $dividir: $display.value = $display.value + $dividir.value
            break
            case $igual: resultado()
            break
            case $limpiar: limpiar()
            break
            case $borrar: borrar()
            break
        }
    }
    
    if(target !== $calculadora){
        switch(key){
            case "1": $display.value = $display.value + $uno.value
            break
            case "2": $display.value = $display.value + $dos.value
            break
            case "3": $display.value = $display.value + $tres.value
            break
            case "4": $display.value = $display.value + $cuatro.value
            break
            case "5": $display.value = $display.value + $cinco.value
            break
            case "6": $display.value = $display.value + $seis.value
            break
            case "7": $display.value = $display.value + $siete.value
            break
            case "8": $display.value = $display.value + $ocho.value
            break
            case "9": $display.value = $display.value + $nueve.value
            break
            case "0": $display.value = $display.value + $cero.value
            break
            case "." : $display.value = $display.value + $punto.value
            break
            case "+": $display.value = $display.value + $sumar.value
            break
            case "-": $display.value = $display.value + $restar.value
            break
            case "*": $display.value = $display.value + $multiplicar.value
            break
            case "/": $display.value = $display.value + $dividir.value
            break
            case "Enter": resultado()
            break
        }
    }
}

function resultado () {
    if ($display.value.length === 0) {
        $display.value = 0
    } if ($display.value.length > 0) {
        $display.value = eval($display.value)
    }
};

function limpiar() {
    $display.value = null;
};

function borrar() {
    let expresion = $display.value;
    $display.value = expresion.substring(0, expresion.length - 1);
};

---

您可以按照以下步骤操作：

• 给数字按钮一个“数字”的类名

• 按类名选择“全部”

• 循环遍历此数字数组，并向每个按钮添加“单击”事件侦听器

• 您可以获取按钮的内部文本/值并附加到显示屏

• 对于操作员，也要遵循相同的步骤

---

第一个

if

语句等价于

if（true）{

..

}

。副本。