如何解决尝试使用JS构建计算器
只需完成一个代码即可根据YouTube教程构建计算器。计算器看起来不错,但我无法使用它。我不明白我在录像中做的一切。谁能帮我吗?我看了几次视频,但我无法正常工作,也想不通为什么。我猜测appendNumber变量出了点问题。但是我不确定对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,.75);
}
.calculator-grid > button:hover{
background-color:rgba(255,.9);
}
.span-two{
grid-column: span 2;
}
.output{
grid-column:1 /-1;
background-color:rgba(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,.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>
解决方法
您的代码中的错误主要是syntactic
。例如,默认情况下,您的代码没有.innerText
的{{1}}。字符串-this.previousOperandTextElement =
不包含$ {this.getDisplayNumber (this.previousOperand)} $ {this.operation}
。第quotes
行缺少一个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()
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。