JavaScript计算器项目：回车键与退格键功能异常求助

问题1：退格键完全无法工作 #

原因是代码错误使用了e.target.keycode，正确逻辑应该直接通过事件对象e的keyCode属性判断按键（注意大小写：keyCode，不是小写的keycode），不需要获取e.target。

问题2：按下回车键重复触发之前点击过的按钮 #

问题出在两点：

• 同样错误使用了e.target.keycode判断回车按键；
• 按下回车时，若按钮处于焦点状态会触发默认click事件，导致重复执行之前的按钮操作，需要阻止该默认行为。

另外还有一处隐藏问题：calculate函数中typeof conta === "Nan"的判断无效，因为NaN的类型是number，应该用isNaN()来判断是否为非数值。

修复后的完整代码 #

function createCalculator(){
    
    return {
        display: document.querySelector('.display'),
        btnClear: document.querySelector('.btn-clear'),

        // Methods go below, attributes above 
        start(){
            this.buttonClick();
            this.pressEnter();
            this.pressBackspace();
        },

        clearDisplay(){
            this.display.value = '';
        },
        
        pressEnter(){
            document.addEventListener('keyup', (e) => {
                if(e.keyCode === 13) {
                    e.preventDefault();
                    this.calculate();
                }
            })
        },

        pressBackspace(){
            document.addEventListener('keyup', (e) => {
                if(e.keyCode === 8) {
                    e.preventDefault();
                    this.deleteNumber();
                }
            })
        },

        deleteNumber(){
            this.display.value = this.display.value.slice(0, -1);
        },

        buttonClick(){
            document.addEventListener('click', function(e) {
                let element = e.target;
                
                if (element.classList.contains('btn-num')){
                    this.btnForDisplay(element.innerText); 
                }

                if(element.classList.contains('btn-clear')){
                    this.clearDisplay();
                }

                if(element.classList.contains('btn-del')){
                    this.deleteNumber();
                }

                if(element.classList.contains('btn-eq')){
                    this.calculate();
                }
            }.bind(this)) 
        },

        btnForDisplay(valor){
            this.display.value += valor;
        },

        // The function that allows the calculations to occur 
        calculate(){
            let conta = this.display.value;
            try {
                conta = eval(conta); // I know using eval might be a security compromise
                if(isNaN(conta) || typeof conta === "undefined" || conta === null){
                    alert("Conta inválida");
                    return;
                }
                this.display.value = String(conta);
            }catch (e){
                alert("Conta inválida");
                return;
            }
        },
    };
}

const calculator = createCalculator();
calculator.start();

内容的提问来源于stack exchange，提问作者Mariana Freire