При нажатии на кнопку = в приложении калькулятора, заместо того, чтобы производить вычисления, кнопка выводится на экран

Question

Вот сам код приложения

HTML:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <link rel="stylesheet" href="./style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
  </head>
  <body>
            <div class="calculator">
                <div class="calculator-value">
                    <p>0</p>
                </div>
                <div class="calculator-buttons">
                    <div class="calculator-button">
                        <button class="calculator-button-clear button">AC</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-plusminus button">+/-</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-percent button">%</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-divide button">/</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-seven button">7</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-eight button">8</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-nine button">9</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-multiply button">x</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-four button">4</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-five button">5</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-six button">6</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-minus button">-</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-one button">1</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-two button">2</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-three button">3</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-plus button">+</button>
                    </div>
                    <div class="calculator-button calculator-button_zero">
                        <button class="calculator-button-zero button">0</button>
                    </div>
                    <div class="calculator-button">
                        <button class="calculator-button-dot button">,</button>
                    </div>
                    <div class="calculator-button ">
                        <button class="calculator-button-equal button">=</button>
                    </div>
                </div>
            </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

const buttons = document.querySelector('.calculator-buttons')
const calcValue = document.querySelector('.calculator-value p')
const clearButton = document.querySelector('.calculator-button-clear')

let firstNum = '';
let secNum = '';
let sign = ''
let finish = false
const digit = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ',']
const signs = ['+', '-', 'x', '/', '=']
function clearAll() {
    firstNum = ''
    secNum = ''
    sign = ''
    finish = false
    calcValue.textContent = 0
}

clearButton.addEventListener('click', clearAll)

buttons.addEventListener('click', function(evt){
    
    if (evt.target.classList.contains('calculator-button-clear')) return
    if (!evt.target.classList.contains('button')) return
        calcValue.textContent = ''
        const key = evt.target.textContent;
        if (digit.includes(key)){
            if(secNum === '' && sign === ''){
                firstNum += key
                calcValue.textContent = firstNum
            } else if (firstNum !== '' && secNum !== '' && finish){
                secNum = key
                finish = false
                calcValue.textContent = firstNum
            } 
            else {
                secNum += key
                calcValue.textContent = secNum
            }
            return
        }
        if (signs.includes(key)){
            sign = key;
            calcValue.textContent = sign
            return
        }
        if(key === '=') {
      switch (sign) {
        case "+":
          firstNum = +firstNum + +secNum;
          break;
        case "-":
          firstNum = firstNum - secNum;
          break;
        case "x":
          firstNum = firstNum * secNum;
          break;
        case "/":
          firstNum = firstNum / secNum;
          break;
      }
            finish = true
            calcValue.textContent = firstNum
        }
    }
)

Если убрать условную конструкцию if (key === '='), то вычисления срабатывают, но без нажатия на равно. Если же ее оставить, то при нажатии на знак он просто появляется на экране. Что тут не так?

БЛОГ НА HUSL

При нажатии на кнопку = в приложении калькулятора, заместо того, чтобы производить вычисления, кнопка выводится на экран

Ответы (0 шт):