我的计算器 javascript 不工作

Question

so I'm trying to make a calculator with javascript but it's not working I don't understand where is the problem I still haven't finished it yet but still it is supposed to be able to take the numbers that I click but it doesn't所以我正在尝试用 javascript 制作一个计算器，但它不起作用不

this is my javascript code这是我的 javascript 代码

 class calculator { constructor(previousOperandTextElement, currentOperandTextElement) { this.previousOperandTextElement = previousOperandTextElement this.currentOperandTextElement = currentOperandTextElement this.clear() } clear() { this.currentOperand = '' this.previousOperand = '' this.operation = undefined } delete() appendNumber(number) { this.currentOperand = number } 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(previousOperandTextElement, currentOperandTextElement) numberButtons.forEach(button => { button.addEventListener('click', () => { calculator.appendNumber(button.innerText) calculator.updateDisplay() }) })

 *, *::before, *::after { box-sizing: border-box; font-family: 'Gothic A1', sans-serif; font-weight: bold; } body { padding: 0; margin: 0; background: linear-gradient(to right, #00AAFF, #00FF6c); }.calc-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); }.calc-grid>button { cursor: pointer; font-size: 2rem; border: 1px solid white; outline: none; background-color: rgba(255, 255, 255, .75); }.calc-grid>button:hover { background-color: rgba(255, 255, 255, .9); }.span-two { grid-column: span 2; }.output { grid-column: span 4; background-color: rgba(0, 0, 0, .75); display: flex; align-items: flex-end; justify-content: space-around; flex-direction: column; padding: 10px; word-wrap: break-word; word-break: break-all; }.output.prev-op { color: rgba(255, 255, 255, .75); font-size: 1.5rem; }.output.curr-op { color: white; font-size: 2.5rem; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>calaculator</title> <link rel="stylesheet" href="main:css"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Gothic+A1.wght@600&display=swap" rel="stylesheet"> </head> <body> <div class="calc-grid"> <div class="output"> <div data-previous-operand class="prev-op"></div> <div data-current-operand class="curr-op"></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>X</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> <script src="home.js"></script> </body> </html>

can someone tell me why my code isn't working with a brief explanation有人能告诉我为什么我的代码不能用简短的解释吗

Answer 1

There are two problems.有两个问题。

functions like compute should have {} even though they are empty.像compute这样的函数应该有 {}，即使它们是空的。 Add {} to all functions without {}.将 {} 添加到所有没有 {} 的函数。 Example: compute(){}示例： compute(){}
you are reusing variable name "calculator", which is used by a class also defined as "calculator".您正在重用变量名称“计算器”，它由 class 使用，也定义为“计算器”。 This is causing error, so you need to change variable's name to something else.这会导致错误，因此您需要将变量的名称更改为其他名称。

我的计算器 javascript 不工作

问题描述

1 个解决方案

解决方案1
0 2021-05-19 16:49:09

我的计算器 javascript 不工作

问题描述

1 个解决方案

解决方案1 0 2021-05-19 16:49:09

解决方案1
0 2021-05-19 16:49:09