Montix
@Montix

Как исправить эту ошибку?

не понимаю как исправить ошибку. В консоле пишет 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;

Как исправить ошибку?
  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
Kozack
@Kozack Куратор тега CSS
Thinking about a11y
Порядок в котором это всё работает:
Браузер начинает загружать HTML
Доходит до тега <script src="calc.js"></script>
Выполняет JS из вашего файла
Доходит до строчки
document.querySelector('.ac').onclick = clearAll; и ломается

А ломается потому, что на момент выполнения этого кода, остальной HTML ещё не загружен и вызов document.querySelector('.ac') возвращает null

В качестве решения:
Перенесите ваш скрипт в конец HTML и/или добавьте тегу script аттрибут deffer
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
KickeRocK
@KickeRocK
FrontFinish
<link rel="stylesheet" href="calc.js">
браво.
Переместите подключение скрипта к /body
Вы пытаетесь определить свойство обьекта которого еще нет в DOM
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект