我正在创建我的第一个JS项目，它是一个简单的To-Do列表，我正在创建一个按钮，它将使用.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>

我每次按按钮都会这样。
我试着跟踪所有的变量，但没有用，我还重新读取了所有的变量名，他们似乎是正确的。我还测试了按钮的文本框内有文字和没有文字。