Почему я получаю ошибку "Cannot set properties of null (setting 'onclick')"?

Question

После гугл запроса по данной ошибке нашел несколько ответов, о том, что ошибка выводится из-за того, что скрипт срабатывает еще до генерации DOM-дерева, но я не понимаю почему так происходит. Подключаю скрип как и всегда - в конце чтобы избежать подобных проблем. Пробовал вынести подключение и за , и в подключал, но это ничего не меняет.

let count = 0

document.querySelector('increase-done-button').onclick = function() {
    count += 1
    console.log(count)
    document.querySelector('done-number').innerHTML = count
}

/*
Color code

Main color #020122
Additional color #028090
Text color #fff
*/

body {
    margin: 0;
    padding: 0;
    background-color: #020122;
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-weight: normal;
}

.main-header {
    margin-left: 21.44px;
}

.counters-block {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.done-counter-block {
    display: flex;
    align-items: center;
    width: max-content;
}

.done-text {
    font-size: 50px;
}

.done-number {
    font-size: 50px;
}

.send_only-counter-block {
    display: flex;
    align-items: center;
    width: max-content;
}

.send_only-text {
    font-size: 50px;
}

.send_only-number {
    font-size: 50px;
}

.button {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #020122;
    border-color: #028090;
    border-style: solid;
    border-width: 4px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    line-height: 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Task Counter</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
    <header class="main-header">
        <h1>Task Counter</h1>
    </header>

    <main class="main-content">
        <div class="counters-block">
            <div class="done-counter-block">
                <p class="done-text">Выполнить:</p>
                <p class="done-number">0</p>
                <button class="increase-done-button button">+</button>
                <button class="decrease-done-button button">-</button>
            </div>

            <div class="send_only-counter-block">
                <p class="send_only-text">Только отправить:</p>
                <p class="send_only-number">0</p>
                <button class="increase-send_only-button button">+</button>
                <button class="decrease-send_only-button button">-</button>
            </div>
        </div>
    </main>
    <script src="script.js"></script>
</body>

</html>

Answer 1

точку в квери селекторе забыл

document.querySelector('.increase-done-button')
                        ^

БЛОГ НА HUSL

Почему я получаю ошибку "Cannot set properties of null (setting 'onclick')"?

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