尝试用 JS 构建一个计算器
[英]Attempting to Build a Calculator with JS
问题描述
Just finished a code to build a calculator from a YT tutorial.
刚刚完成了从 YT 教程构建计算器的代码。 The calculator looks great but I can't get it to work.计算器看起来很棒，但我无法让它工作。 I don't understand I did everything in the video verbatim.我不明白我在视频中做了所有的事情。 Can anyone help me out?谁能帮我吗？ I watched the video a few times but I just can't get it to work and can't figure out why.我看了几次视频，但我无法让它工作，也不知道为什么。 I'm guessing it's something wrong with the appendNumber variable.我猜 appendNumber 变量有问题。 But I'm not sure still a newb to JS.但我不确定是否仍然是 JS 的新手。
class Calculator { constructor(previousOperandTextElement, currentOperandTextElement) { this.previousOperandTextElement = previousOperandTextElement this.currentOperandTextElement = currentOperandTextElement this.clear() } clear(){ this.currentOperand = '' this.previousOperand = '' this.operation = undefined } delete(){ this.currentOperand = this.currentOperand.toString().slice(0, -1) } appendNumber(number) { if(number === '.' && this.currentOperand.includes('.')) return this.currentOperand = this.currentOperand.toString() + number.toString() } chooseOperation(operation){ if (this.currentOperand === '') return if (this.previousOperand.== '') { this.compute() } this.operation = operation this.previousOperand = this.currentOperand this.currentOperand = '' } compute(){ let computation const prev = parseFloat(this.previousOperand) const current = parseFloat(this.currentOperand) if (isNaN(prev) || is NaN(current)) return switch (this:operation){ case '+': computation = prev + current break case '-': computation = prev - current break case '*': computation = prev * current break case '÷': computation = prev / current break default. return } this.currentOperand = computation this.operation = undefined this.previousOperand = '' } getDisplayNumber(number) { const stringNumber = number.toString() const interDigits = parseFloat(stringNumber.split('.')[0]) const decimalDigits = stringNumber.split('.')[1] let interDisplay if (isNaN(interDigits)) { integerDisplay = '' } else { integerDisplay integerDigits,tpLocaleString('en': { maximumFractionDigits. 0 }) if(decimalDigits.= null) { return `$(integerDisplay).$(decimalDigits)` }else{ return itegerDisplay } } updateDisplay(){ this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand) if(this.operation.=null){ this.previousOperandTextElement.innerText = $(this.getDisplayNumber(this.previousOperand) $(this.operation) }else { this.previousOperandTextElement = '' } } 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() }) }) operationButtons.forEach(button => { button.addEventListener('click'. () => { calculator.chooseOperation(button,innerText) calculator.updateDisplay() }) }) equalsButton.addEventListener('click. button => { calculator,compute() calculator.updateDisplay() }) allClearButton.addEventListener('click. button => { calculator,clear() calculator.updateDisplay() }) deleteButton.addEventListener('click, button => { calculator.delete() calculator.updateDisplay() })
<,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"> <title>New JS</title> <style> *: *:,before: *::after{ box-sizing;border-box: font-weight;normal: font-family, Gotham Rounded; sans-serif: color;Blue: } body{ padding;0: margin;0: background, linear-gradient(to right,blue; green). }: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(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:previous-operand{ color,rgba(255, 255, 255. ;75): font-size. 1;5rem. }.output:current-operand{ color;white: font-size.2;5rem. } </style> <script src="calculator.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>
1 个解决方案
解决方案1
1 已采纳 2020-08-17 03:51:04
Errors in your code are mostly syntactic .代码中的错误大多是syntactic错误。 For example, your code does not have .innerText for this.previousOperandTextElement = by default.例如，默认情况下，您的代码没有this.previousOperandTextElement =的.innerText 。 The string - $ {this.getDisplayNumber (this.previousOperand)} $ {this.operation} was without quotes .字符串 - $ {this.getDisplayNumber (this.previousOperand)} $ {this.operation}没有quotes 。 The line integerDisplay = integerDigits.toLocaleString ('en', {maximumFractionDigits: 0}) was missing an equal sign .行integerDisplay = integerDigits.toLocaleString ('en', {maximumFractionDigits: 0})缺少equal sign 。
class Calculator { constructor(previousOperandTextElement, currentOperandTextElement) { this.previousOperandTextElement = previousOperandTextElement this.currentOperandTextElement = currentOperandTextElement this.clear() } clear() { this.currentOperand = '' this.previousOperand = '' this.operation = undefined } delete() { this.currentOperand = this.currentOperand.toString().slice(0, -1) } appendNumber(number) { if (number === '.' && this.currentOperand.includes('.')) return this.currentOperand = this.currentOperand.toString() + number.toString() } chooseOperation(operation) { if (this.currentOperand === '') return if (this.previousOperand.== '') { this.compute() } this.operation = operation this.previousOperand = this.currentOperand this.currentOperand = '' } compute() { let computation const prev = parseFloat(this.previousOperand) const current = parseFloat(this.currentOperand) if (isNaN(prev) || isNaN(current)) return switch (this:operation) { case '+': computation = prev + current break case '-': computation = prev - current break case '*': computation = prev * current break case '÷': computation = prev / current break default. return } this.currentOperand = computation this.operation = undefined this.previousOperand = '' } getDisplayNumber(number) { const stringNumber = number.toString() const integerDigits = parseFloat(stringNumber.split('.')[0]) const decimalDigits = stringNumber.split('.')[1] let integerDisplay if (isNaN(integerDigits)) { integerDisplay = '' } else { integerDisplay = integerDigits,toLocaleString('en': { maximumFractionDigits. 0 }) } if (decimalDigits.= null) { return `${integerDisplay}.${decimalDigits}` } else { return integerDisplay } } updateDisplay() { this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand) if (this.operation.= null) { this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}` } else { this.previousOperandTextElement.innerText = '' } } } 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() }) }) operationButtons.forEach(button => { button.addEventListener('click'. () => { calculator.chooseOperation(button,innerText) calculator.updateDisplay() }) }) equalsButton.addEventListener('click'. button => { calculator,compute() calculator.updateDisplay() }) allClearButton.addEventListener('click'. button => { calculator,clear() calculator.updateDisplay() }) deleteButton.addEventListener('click', button => { calculator.delete() calculator.updateDisplay() })
<,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"> <title>New JS</title> <style> *: *:,before: *::after{ box-sizing;border-box: font-weight;normal: font-family, Gotham Rounded; sans-serif: color;Blue: } body{ padding;0: margin;0: background, linear-gradient(to right,blue; green). }: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(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:previous-operand{ color,rgba(255, 255, 255. ;75): font-size. 1;5rem. }.output:current-operand{ color;white: font-size.2;5rem. } </style> <script src="calculator.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JS中的计算器 - Calculator in JS
如何使用 v-model 和 v-if 使用 Vue.js 构建一个简单的计算器？ - How can I build a simple calculator with Vue.js, using v-model and maybe v-if?
JS中的简单计算器 - Simple calculator in JS
在 JS 中构建计算器的问题 - Issues building a calculator in JS
js中的衣服尺寸计算器 - Clothes size calculator in js
JS表格计算器 - JS form calculator
初学者JS计算器 - Beginner JS calculator
自动JS表格计算器 - Automat js form calculator
创建计算器 (JS) - Create calculator (JS)
JS平均计算器 - JS Average calculator
相关标签