Cześć to znów ja, i znów potrzebuje pomocy w moim programiku, wszystko wygląda w porządku ale jednak coś nie działa bo nie widać liczb które klikam. Da rade ktoś mi w tym pomóc?
<html>
<script>
window.addEventListener("load", () => {
const calculatorPanel = new CalculatorPanel();
const numbers = getNumbers(10, calculatorPanel);
setFunctionalityButton(calculatorPanel, 'add');
setFunctionalityButton(calculatorPanel, 'subtract');
setFunctionalityButton(calculatorPanel, 'divide');
setFunctionalityButton(calculatorPanel, 'multiply');
document.getElementById('count').onclick = () => calculatorPanel.count();
})
function getNumbers(counter, calculatorPanel) {
const numbersArray = []
let a = new LICZBA();
for(let x = 0; x < counter; x++) {
numbersArray.push(new LICZBA());
numbersArray[x].setDiv(document.getElementById(x.toString()), () => calculatorPanel.setValue(i))
}
return numbersArray;
}
function setFunctionalityButton(calculatorPanel, functionality) {
document.getElementById(functionality).onclick = () => {
calculatorPanel.setFunctionality(functionality);
}
}
class CalculatorPanel {
constructor(div, firstValue, secondValue, sum, setFirstValue, isFirst, functionality)
setValue(value) {
if (this.isFirst) {
this.setFirstValue = false;
this.firstValue = parseInt(this.firstValue.toString() + value.toString());
this.div.innerHTML = this.firstValue
} else {
this.secondValue = parseInt(this.secondValue.toString() + value.toString());
this.div.innerHTML = this.secondValue;
}
}
setFunctionality(functionality) {
this.functionality = functionality;
if (this.setFirstValue)
this.firstValue = this.sum;
if (this.firstValue != 0)
this.isFirst = false;
}
changeIsFirst() {
this.isFirst = !this.isFirst;
}
count() {
switch (this.functionality) {
case 'add':
this.sum = this.firstValue + this.secondValue;
this.div.innerHTML = this.sum;
this.resetValues();
break;
case 'subtract':
this.sum = this.firstValue - this.secondValue;
this.div.innerHTML = this.sum;
this.resetValues();
break;
case 'divide':
if (this.firstValue !== 0 && this.secondValue !== 0) {
this.sum = this.firstValue / this.secondValue;
this.div.innerHTML = this.sum;
this.resetValues();
}
break;
case 'multiply':
this.sum = this.firstValue * this.secondValue;
this.div.innerHTML = this.sum;
this.resetValues();
break;
}
}
resetValues() {
this.firstValue = 0;
this.secondValue = 0;
this.isFirst = true;
this.setFirstValue = true;
}
}
class LICZBA {
constructor(div) {}
setDiv(div, doSomething) {
this.div = div;
this.div.onclick = doSomething;
}
}
</script>
<style>
.calculator-container {
width: 30%;
height: 70vh;
background-color: #f1f807;
color: rgb(0, 0, 0);
font-size: 25px;
}
.calculator-panel {
width: 100%;
height: 25%;
border: 1px solid rgb(0, 0, 0);
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
display: flex;
align-items: center;
justify-content: center;
}
.number {
width: 33%;
height: 15%;
display: flex;
align-items: center;
justify-content: center;
float: left;
cursor: pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border-right: 1px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(0, 0, 0);
}
.number-center {
width: 34%;
}
.number:hover {
background-color: rgb(255, 255, 255);
}
</style>
<body style="margin: 1px;">
<div id="calculatorContainer" class="calculator-container">
<div id="calculatorPanel" class="calculator-panel"></div>
<div id="1" class="number">1</div>
<div id="2" class="number number-center">2</div>
<div id="add"class="number">+</div>
<div id="3" class="number">3</div>
<div id="subtract" class="number number-center">4</div>
<div id="subtract" class="number">-</div>
<div id="5" class="number">5</div>
<div id="subtract" class="number number-center">6</div>
<div id="divide" class="number">*</div>
<div id="7" class="number">7</div>
<div id="subtract" class="number number-center">8</div>
<div id="multiply" class="number">/</div>
<div id="9" class="number">9</div>
<div id="subtract" class="number number-center">0</div>
<div id="count" class="number">=</div>
</div>
</body>
</html>