[英]2 calculators at the same time using javascript class template
I am trying to run 2 calculators at the same time.我正在尝试同时运行 2 个计算器。 The code I have so far works only on the 1st calculator, however the 2nd one does not work.到目前为止,我的代码仅适用于第一个计算器,但第二个计算器不起作用。
here is a link to the project https://codepen.io/Zerka1982/pen/OJwVygy?editors=1010这是项目的链接https://codepen.io/Zerka1982/pen/OJwVygy?editors=1010
looking forward to your support.期待您的支持。 thanks!谢谢!
I tried to change the data name in the attribute inside HTML for the 2nd calculator我试图为第二个计算器更改 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;
};*/
I found a solution (not the best one I guess) using 2 calculators, however I am looking for more dynamic approach.我使用 2 个计算器找到了一个解决方案(我猜不是最好的),但是我正在寻找更动态的方法。 Please, fell free to suggest a solution if you have one.如果您有解决方案,请随意提出解决方案。
I added id(s) to each HTML calculator, then on the JS part, I used e.target.parentNode.id to check which Calculator I am typing in, then simply through if statements, I could have the calculation up running我将 id(s) 添加到每个 HTML 计算器,然后在 JS 部分,我使用 e.target.parentNode.id 来检查我输入的是哪个计算器,然后简单地通过 if 语句,我可以运行计算
See bellow solution https://codepen.io/Zerka1982/pen/OJwVygy?editors=1010请参阅以下解决方案https://codepen.io/Zerka1982/pen/OJwVygy?editors=1010
If you have a dynamic solution to as many calculators as possible, please feel free to leave a comment or a code example.如果您有尽可能多的计算器的动态解决方案,请随时发表评论或代码示例。 Thanks!谢谢!
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.