новичок в консоле не выбивает когда нажимаешь на первую цифру в чем проблема js

Question

let a = ''; /*first Number*/
let b = ''; /*second number*/
let sign = '';
let finish = false;

const digit = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.']; const action = ['-', '+', 'X', '/'];

/*екран*/

const out = document.querySelector('.calc-screen p');

function clearAll() {
  a = '';
  b = '';
  sign = '';
  finish = false;
  out.textContent = 0;
}


document.querySelector('.asd').onclick = clearAll;


document.querySelector('.buttons').onclick = (event) => {

  if (!event.target.classList.contains('btn')) return;


  if (!event.target.classList.contains('asd')) return;

  out.textContent = '';

  const key = event.target.textContent;

  if (digit.includes(key)) {
    a += key;
    console.log(a, b, sign);

  }

}

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="calc.css">
       
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
        <div class="calc">
            <div class="calc-screen">
                <p>0</p>
            </div>
    
            <div class="buttons">
    
                <div class="btn asd bg-grey">asd</div>
                <div class="btn plus-minus bg-grey">+/-</div>
                <div class="btn percent bg-grey">%</div>
                <div class="btn division bg-orange">/</div>
    
                <div class="btn seven">7</div>
                <div class="btn eight">8</div>
                <div class="btn nine">9</div>
                <div class="btn myltiply bg-orange">X</div>
    
                
                <div class="btn four">4</div>
                <div class="btn five">5</div>
                <div class="btn six">6</div>
                <div class="btn mminus bg-orange">-</div>
    
                
                <div class="btn one">1</div>
                <div class="btn two">2</div>
                <div class="btn three">3</div>
                <div class="btn plus bg-orange">+</div>
    
                
                <div class="btn zero">0</div>
                <div class="btn dot">.</div>
                <div class="btn equal bg-orange">=</div>
    
    
               
            </div>
          
        </div>
       
    
    </body>
    <script src="calc.js"></script>
    </html>
    
    CSS:

*{

    box-sizing: border-box;
    list-style: none;

}

/*НАСТРОЙКА КАЛЬКУЛЯТОРА*/
.calc{
    margin: 50px auto; 
    width: 400px;       /*300*/
    height: 550px;      /*500*/
    /* border: 1px solid #000; */
    border-radius: 20px;
    background: #000;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 4px 4px 4px #4f4f4f ;
    padding: 18px;
    
}




.buttons{
    display: grid;
    grid-template-areas: 
    "ac plus-minus percent division"
    "seven eight nine multi"
    "for five six minus"
    "one two three plus"
    "zero zero dot equal";
    grid-gap: 7px;
    justify-items: center;

}

.btn{
    width: 60px;
    height: 60px;
    line-height: 60px;
    background: #333;
    border-radius: 50%;
    text-align: center;
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none; 

}


.btn.zero{
    grid-area: zero;  
    width: 100%;
    border-radius: 35px;
}

.btn:hover{
    filter: brightness(120%);
    
} 

.btn:active{
    filter: brightness(90%);
}

.btn.bg-grey{
    background: #a6a6a6;
}

.btn.bg-orange{
    background: #ff9501;
}


/*ЕКРАН */

.calc-screen{
    height: 125px;
    padding: 10px;
    display: grid;
    justify-items: end;
    align-items: end;
    margin-bottom: 55px;
  
}

.calc-screen p{
    text-align: right;
    font-size: 4rem;
    margin: 0;
    
}

БЛОГ НА HUSL

новичок в консоле не выбивает когда нажимаешь на первую цифру в чем проблема js

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