我写了一个由HTML,CSS和javascript组成的代码,它应该是网站中的计算器。但是,由于我对使用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 allcleaButton = 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()
})
})
<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>
appendNumber
不附加。它会覆盖。<input type="text">
没有innerText
。它具有value
:
class Calculator {
constructor(currentOperandTextElement) {
this.currentOperandTextElement = currentOperandTextElement
this.currentOperand = ''
}
appendNumber(number) {
this.currentOperand += number
}
updateDisplay() {
this.currentOperandTextElement.value = this.currentOperand
}
}
const numberButtons = document.querySelectorAll('[data-number]')
const currentOperandTextElement = document.querySelector('[data-current-operand]')
const calculator = new Calculator(currentOperandTextElement)
numberButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.appendNumber(button.innerText)
calculator.updateDisplay()
})
})
<button data-number>1</button>
<input type="text" data-current-operand>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句