Why am I getting the error “Uncaught TypeError: Cannot read properties of null (reading ‘appendChild’)”

let addToDoButton = document.getElementById('addToDo');
let toDoContainer = document.getElementById('toDoContainer');
let inputField = document.getElementById('inputField');

/*On click we create a paragraph and append it to toDoContainer*/
addToDoButton.addEventListener('click', function(){
    var paragraph = document.createElement('p');
    toDoContainer.appendChild(paragraph);
})

html, body {
    width: 50%;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif
}

.container {
    width: 360px;
}

#inputField {
    width: 300px;
    height: 46px;
    border: 1px solid black;
    outline: none;
    font-size: 25px;
    vertical-align: middle;
}

#addToDo {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    vertical-align: middle;
    font-size: 30px;
}

.to-dos {
    margin-top: 25px;
}

.paragraph-styling {
    margin: 0;
    cursor: pointer;
    font-size: 20px;
}

<h1>To Do List</h1>
<div class="container">
    <input id="inputField" type="text"><button id="addToDo">+</button>
    <div class="to-dos" id="toDoContainer">
    </div>
</div>