[英]2 calculators at the same time using javascript class template
我正在嘗試同時運行 2 個計算器。 到目前為止,我的代碼僅適用於第一個計算器,但第二個計算器不起作用。
這是項目的鏈接https://codepen.io/Zerka1982/pen/OJwVygy?editors=1010
期待您的支持。 謝謝!
我試圖為第二個計算器更改 HTML 內屬性中的數據名稱
class MyCalculator {
constructor(previousValueTextElement, currentValueTextElement) {
this.previousValueTextElement = previousValueTextElement
this.currentValueTextElement = currentValueTextElement
this.clearScreen()
}
clearScreen() {
this.currentOperand = ''
this.previousOperand = ''
this.operation = undefined
}
deleteLastNumber() {
this.currentOperand = this.currentOperand.toString().slice(0, -1)
}
appendNumber(number) {
// Add 0 at the beginning if numbers start with ('.')
if(number.startsWith('.')) this.currentOperand = '0' + this.currentOperand.toString()
// Verify if the dot is clicked or the number already contains the dot [no action]
if (number === '.' && this.currentOperand.includes('.')) return
this.currentOperand = this.currentOperand.toString() + number.toString()
}
chooseOperator(operation) {
if(this.currentOperand === '' || this.currentOperand === undefined) return
if(this.previousOperand !== '') {
this.calculate()
}
this.operation = operation
this.previousOperand = this.currentOperand
this.currentOperand = ''
}
// Method to handle the arithmetic calculation
calculate() {
let result
const previousValue = parseFloat(this.previousOperand)
const currentValue = parseFloat(this.currentOperand)
if(isNaN(previousValue) || isNaN(currentValue)) return
// Switch statement to handle different operations
switch(this.operation) {
case '+':
result = previousValue + currentValue
break
case '*':
result = previousValue * currentValue
break
case '-':
result = previousValue - currentValue
break
case '/':
result = previousValue / currentValue
break
default:
return
}
this.currentOperand = result
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
}
}
// Method to update the output result
updateDisplay() {
this.currentValueTextElement.innerText =
this.getDisplayNumber(this.currentOperand)
if (this.operation != null) {
this.previousValueTextElement.innerText =
`${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
} else {
this.previousValueTextElement.innerText = ''
}
}
}
// Get all variables
const numberBtns = document.querySelectorAll('[data-number]')
const operationBtns = document.querySelectorAll('[data-operation]')
const equalButton = document.querySelector('[data-equals]')
const deleteBtn = document.querySelector('[data-delete]')
const clearScreenBtn = document.querySelector('[data-clear-all]')
const previousValueTextElement = document.querySelector('[data-previous-value]')
const currentValueTextElement = document.querySelector('[data-actual-value]')
const previousValueTextElement1 = document.querySelector('[data-previous-value1]')
const currentValueTextElement1 = document.querySelector('[data-actual-value1]')
const calculator = new MyCalculator(previousValueTextElement, currentValueTextElement)
const calculator1 = new MyCalculator(previousValueTextElement1, currentValueTextElement1)
// The forEach() method executes a function once for each [button number]
numberBtns.forEach(button => {
button.addEventListener('click', () => {
calculator.appendNumber(button.innerText)
calculator.updateDisplay()
})
})
// The forEach() method executes a function once for each operation [+,-,*,/]
operationBtns.forEach(button => {
button.addEventListener('click', () => {
calculator.chooseOperator(button.innerText)
calculator.updateDisplay()
})
})
// method is to register an event listener for equal button
equalButton.addEventListener('click', button => {
calculator.calculate()
calculator.updateDisplay()
})
// Clear the screen [the output result]
clearScreenBtn.addEventListener('click', button => {
calculator.clearScreen()
calculator.updateDisplay()
})
// Delete last added number
deleteBtn.addEventListener('click', button => {
calculator.deleteLastNumber()
calculator.updateDisplay()
})
// Allow user to use the keyboard
window.addEventListener('keydown', (e) => {
if(
// Allow user to use the keyboard numbers [0,1,2,3,4,5,6,7,8,9]
e.key === '0' || e.key === '1' || e.key === '2' ||
e.key === '3' || e.key === '4' || e.key === '5' ||
e.key === '6' || e.key === '7' || e.key === '8' ||
e.key === '9' || e.key === '.'
) {
calculator.appendNumber(e.key)
calculator.updateDisplay()
} else if (
// Allow user to use the keyboard operators [+,*,-,/]
e.key === '*' || e.key === '+' || e.key === '-' || e.key === '/'
) {
calculator.chooseOperator(e.key)
calculator.updateDisplay()
} else if ( e.key === 'Enter') {
// Allow user to use the keyboard ['Enter'] to get result
calculator.calculate()
calculator.updateDisplay()
} else if ( e.key === 'c' || e.key === 'C' || e.key === 'delete') {
// Allow user to use the keyboard ['c','C', 'delete'] to clear screen
calculator.clearScreen()
calculator.updateDisplay()
} else if ( e.key === 'd' || e.key === 'D' || e.key === 'Backspace') {
// Allow user to use the keyboard ['d','D'] to delete last number
calculator.deleteLastNumber()
calculator.updateDisplay()
} else {
// Do not allow user to use other keys than the predefined ones
alert('🚫 This key is not allowed 🚫')
}
})
// Disable right-click
//document.addEventListener('contextmenu', (e) => e.preventDefault());
/*function ctrlShiftKey(e, keyCode) {
return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}*/
// Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
/*
document.onkeydown = (e) => {
if (
event.keyCode === 123 ||
ctrlShiftKey(e, 'I') ||
ctrlShiftKey(e, 'J') ||
ctrlShiftKey(e, 'C') ||
(e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
)
return false;
};*/
我使用 2 個計算器找到了一個解決方案(我猜不是最好的),但是我正在尋找更動態的方法。 如果您有解決方案,請隨意提出解決方案。
我將 id(s) 添加到每個 HTML 計算器,然后在 JS 部分,我使用 e.target.parentNode.id 來檢查我輸入的是哪個計算器,然后簡單地通過 if 語句,我可以運行計算
請參閱以下解決方案https://codepen.io/Zerka1982/pen/OJwVygy?editors=1010
如果您有盡可能多的計算器的動態解決方案,請隨時發表評論或代碼示例。 謝謝!
numberBtns.forEach(button => { button.addEventListener('click', (e) => { let parentNodeID = e.target.parentNode.id if( parentNodeID === 'calculatorID1') { calculator.appendNumber(button.innerText) calculator.updateDisplay() } else { calculator1.appendNumber(button.innerText) calculator1.updateDisplay() } }) })
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.