对象 HTMLDivElement 错误显示在页面上

Question

目前我正在使用 Typescript 开发计算器，我遇到了一个问题，当我点击我想添加数字的按钮时，一切正常，但问题是显示 [object HTMLDivElement] 并且当我点击了多次按钮，它添加了一个像这样的数字的文本 [object HTMLDivElement]222222

我正在使用类制作计算器，这是我遇到这个问题的小代码

appendNumber(number) {
        if (number === '.' && this.currentOperandText.includes('.')) return;
        //Here is the code I convert them as string to add the numbers together
        this.currentOperandText = String(this.currentOperandText) + String(number);
    }

然后我让 Eventlistner 在按钮上充当 appendNumber 功能以显示数字

const calculator = new Calculator(current, previous);
numbers.forEach(element => {
    element.addEventListener('click', () => {
        calculator.appendNumber(element.innerHTML);
        //updateDisplay is another Method to which displays the clicked numbers on page
        calculator.updateDisplay();
    });
});

如果你想检查我的计算器是如何工作的，这里是 link JSFIDDLE

Answer 1

第一次调用appendNumber(number)时，this.currentOperandText是HTMLDivElement对象，也就是说运行this.currentOperandText.toString()会return[object HTMLDivElement]。添加如下 if 语句来检查这一点。

if (this.currentOperandText.toString() !== '[object HTMLDivElement]')
{
  this.currentOperandText = this.currentOperandText.toString() + number.toString()
} else {
  this.currentOperandText = number.toString()
}

对象 HTMLDivElement 错误显示在页面上

object HTMLDivElement error displays on page

dom

calculator

typescript