javascript - 未捕获的类型错误:无法读取未定义的属性“toString”--javascript
问题描述
我正在尝试使用 javascript 创建一个计算器,但每当我单击数字按钮时,我都会在控制台上收到一条错误消息“Uncaught TypeError: Cannot read property 'toString' of undefined”。同时,数字按钮不显示在字符串中。我究竟做错了什么?
//Javascript
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement;
this.currentOperandTextElement = currentOperandTextElement;
this.clear();
}
clear() {
this.previousOperandElement = '';
this.currentOperandElement = '';
this.operation = undefined;
}
delete() {
}
appendNumber(number) {
this.currentOperand = this.currentOperand.toString() + number.toString();
}
chooseOperation(operation) {
}
compute() {
}
updateDisplay() {
this.currentOperandTextElement.innerText = this.currentOperand;
}
}
const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');
const calculator = new Calculator(currentOperandTextElement, previousOperandTextElement);
numberButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.appendNumber(button.innerText);
calculator.updateDisplay();
});
});
//CSS
*,
*::before,
*::after {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
font-weight: normal;
}
body {
padding: 0;
margin: 0;
background: linear-gradient(to right, #722f37, #caa181);
}
.calculator-grid {
display: grid;
justify-content: center;
align-content: center;
min-height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}
.calculator-grid>button {
cursor: pointer;
font-size: 2rem;
border: 1px solid white;
outline: none;
background-color: rgba(255, 255, 255, .75);
}
.calculator-grid>button:hover {
background-color: rgba(255, 255, 255, .9);
}
.span-two {
grid-column: span 2;
}
.output {
grid-column: 1 / -1;
background-color: rgba(51, 35, 35, 0.397);
display: flex;
align-items: flex-end;
justify-content: space-around;
flex-direction: column;
padding: 10px;
word-wrap: break-word;
word-break: break-all;
}
.output .previous-operand {
color: rgba(255, 255, 255, .75);
font-size: 1.5rem;
}
.output .current-operand {
color: white;
font-size: 2.5rem;
}
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" , initial-scale=1.0>
<meta http-equiv="X-UA-compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet">
<title>Calculator</title>
<script src="script.js" defer></script>
</head>
<body>
<div class="calculator-grid">
<div class="output">
<div data-previous-operand class="previous-operand"></div>
<div data-current-operand class="current-operand"></div>
</div>
<button data-all-clear class="span-two">AC</button>
<button data-delete>DEL</button>
<button data-operation>÷</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operation>*</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-operation>+</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data operation>-</button>
<button data-number>.</button>
<button data-number>0</button>
<button data-equals class="span-two">=</button>
</div>
</body>
</html>
解决方案
您不初始化“currentOperand”。
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement;
this.currentOperandTextElement = currentOperandTextElement;
this.currentOperand = "";
this.clear();
}
推荐阅读
- angular - 如何从 Ionic5 和 Angular 中的 getSwiper 获取 Swiper 实例
- javascript - 在特定条件下停止执行循环并等待点击,然后继续
- python - 云功能包无法下载
- python - 如何将每个项目数组添加到python中的特定行?
- angular - 如何在 iOS 的 Cordova Angular 项目中使 HTML5 音频 api 在后台运行?
- flutter - 颤振:无法解决 - 输入“列表”
' 不是类型 'List 的子类型 ' - python - 如何拆分数组列并将其与 Pandas 中的等效行分组?
- angular - 来自标头的角度存储不记名令牌
- python-3.x - 即使我在 Ubuntu 上安装了 Locust,“找不到 Locust 命令”也会返回
- python - Pyspark:仅从嵌套的 json 数据中读取某些字段