kalkulator który nie reaguje

0

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>

0

A czy zajrzałeś do konsoli (Shift+Ctrl+K albo dla FF "menu->dla twórców witryn->konsola WWW")?

Mi tam pokazuje taki błąd:
SyntaxError: missing { before function body kalt.html:33:6

1

mi właśnie nic nie pokazywało i stad pytam

A jaka przeglądarka - FF czy coś innego?
W każdym razie - masz teraz informację, co go boli, więc walcz, poprawiaj i jakby co to pisz dalej ;)

0

To jakieś zadanko rekrutacyjne, bo wygląda na celowo popsuty kod.

1

Mam znalazłem błąd i go popoprawia

dla chcących kod niżej

<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 Number();
      for(let i = 0; i < counter; i++) {
        numbersArray.push(new Number());
        numbersArray[i].setDiv(document.getElementById(i.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) {
        this.div = document.getElementById('calculatorPanel');
        this.isFirst = true;
        this.isNext = false;
        this.setFirstValue = true;
        this.firstValue = 0;
        this.secondValue = 0;
        this.sum = 0;
        this.div.innerHTML = this.firstValue
      }

      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 Number {
      constructor(div) {}

      setDiv(div, doSomething) {
        this.div = div;
        this.div.onclick = doSomething;
      }

    }

  </script>
<style> 
.calculator-container {
  width: 30%;
  height: 70vh;
  background-color: #ffee00;
  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; padding: 0">
    <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="3" class="number">3</div>
      <div id="4" class="number">4</div>
      <div id="5" class="number number-center">5</div>
      <div id="6" class="number">6</div>
      <div id="7" class="number">7</div>
      <div id="8" class="number number-center">8</div>
      <div id="9" class="number">9</div>
      <div id="add"class="number">+</div>
      <div id="0" class="number number-center">0</div>
      <div id="subtract" class="number">-</div>
      <div id="multiply" class="number">*</div>
      <div id="divide" class="number number-center">/</div>
      <div id="count" class="number">=</div>
    </div>
  </body>
</html>

0

A napisz może w którym konkretnie to było miejscu, albo wklej tylko poprawiony fragment PRZED i PO. Bo raczej nikomu się nie będzie chciało przeglądać całości i szukać, co tam zmieniłeś :P

1
function getNumbers(counter, calculatorPanel) {
      const numbersArray = []
      let a = new Number();
      for(let i = 0; i < counter; i++) {     <---------- zamiast i bylo x
        numbersArray.push(new Number());     
        numbersArray[i].setDiv(document.getElementById(i.toString()), () => calculatorPanel.setValue(i))      <---------- tu tez

1 użytkowników online, w tym zalogowanych: 0, gości: 1