не понимаю как исправить ошибку. В консоле пишет Uncaught TypeError: Cannot set properties of null (setting 'onclick')
at calc.js:20
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Калькулятор</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="calc.js">
</head>
<body>
<script src="calc.js"></script>
<div class="calc">
<div class="calc-screen">
<p>0</p>
</div>
<div class="buttons">
<div class="btn ac bg-grey">ac</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">8</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 myltiply 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>
</html>
CSS
.calc{
margin: 50px auto;
width: 300px;
height: 500px;
border: 1px solid #000;
border-radius: 20px;
background: #000;
color: #fff;
font-family: Arial;
padding: 18px;
box-shadow: 4px 4px 4px #4f4f4f;
}
.calc-screen{
height: 125px;
padding: 10px;
display: grid;
justify-items: end;
align-items: end;
margin-bottom: 10px;
}
.calc-screen p{
text-align: right;
font-size: 4rem;
margin: 0;
}
.buttons{
display: grid;
grid-template-areas:
"ac plus-minus percent division"
"seven eight nine multi"
"four five siz minus"
"one two three plus"
"zero zero dot equal" ;
grid-gap: 7px;
justify-items: center;
}
.btn{
width: 60px;
height: 60px;
background: #333;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 1.5rem;
cursor: pointer;
user-select: none;
}
.btn.zero{
grid-area: zero;
width: 100%;
border-radius: 34px;
}
.btn:hover{
filter: brightness(120%);
}
.btn:active{
filter: brightness(90%);
}
.btn.bg-grey{
background: #a6a6a6;
}
.btn.bg-orange{
background: #ff9501;
}
JS
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('.ac').onclick = clearAll;
Как исправить ошибку?
