카테고리

질문 & 답변
세부 분야

프로그래밍 언어
해결 여부

미해결

게산기 공부 중 질문있습니다

22.01.25 12:43 작성 조회수 131

버튼에 id를 각자 주셨는데 같은 클래스명을 사용하고

클릭한 버튼의 textContent만 받으면 가능하지 않을까? 하고 생각했는데

7만 인식하고 다른 버튼은 인식을 아예 못하는데 이유가 뭔지 모르겠습니다.ㅠㅠ

event.target으로 콘솔로그를 찍어봐도 7밖에 인식이 안돼서 이유를 잘 모르겠습니다....

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>calculator</title>
    <style>
      * {
        box-sizing: border-box;
      }

      #operator {
        width: 50px;
        height: 50px;
        margin: 5px;
        text-align: center;
      }

      #result {
        width: 180px;
        height: 50px;
        margin: 5px;
        text-align: right;
      }

      button {
        width: 50px;
        height: 50px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <input readonly id="operator" />
    <input readonly type="number" id="result" />
    <div class="row">
      <button class="digit">7</button>
      <button class="digit">8</button>
      <button class="digit">9</button>
      <button id="plus">+</button>
    </div>
    <div class="row">
      <button class="digit" id="num-4">4</button>
      <button class="digit" id="num-5">5</button>
      <button class="digit" id="num-6">6</button>
      <button id="minus">-</button>
    </div>
    <div class="row">
      <button class="digit" id="num-1">1</button>
      <button class="digit" id="num-2">2</button>
      <button class="digit" id="num-3">3</button>
      <button id="divide">/</button>
    </div>
    <div class="row">
      <button id="clear">C</button>
      <button class="digit" id="num-0">0</button>
      <button id="equal">=</button>
      <button id="multiply">x</button>
    </div>
  </body>
  <script>
    let numOne = "";
    let operator = "";
    let numTwo = "";
    const $operator = document.querySelector("#operator");
    const $result = document.querySelector("#result");

    const onClickNumber = (event) => {
      if (!operator) {
        numOne += event.target.textContent;
        $result.value += event.target.textContent;
        return;
      }

      if (!numTwo) {
        $result.value = "";
      }

      numTwo += event.target.textContent;
      $result.value += event.target.textContent;
    };

    document.querySelector(".digit").addEventListener("click", onClickNumber);
  </script>
</html>