Question

即使我一步一步地遵循教程，我也无法清除我的输入字段，我正在制作这个待办事项列表，并且我希望在我提交新的待办事项时输入字段是清晰的。那么我的代码有什么问题？ ps：我试图清除缓存，什么也没有

let addButton=document.getElementById('addButton');
let toDoContainer = document.getElementById('ToDoContainer');
let inputField = document.getElementById('text');
//event listeners 
addButton.addEventListener('click',addTodo);


//functions 
function addTodo(event,title){
    event.preventDefault();
    //create the to do 
    let toDoDiv = document.createElement('div');
    toDoDiv.classList.add('todo');
    const newToDo =document.createElement('p');
    newToDo.innerHTML=inputField.value;
    newToDo.classList.add('todo-item');
    toDoDiv.appendChild(newToDo);
    toDoContainer.appendChild(toDoDiv);
    //check mark button 
    const completedButton = document.createElement('button');
    completedButton.innerHTML="success";
    completedButton.classList.add("complete-btn");
    toDoDiv.appendChild(completedButton);
    //check delete button 
    const trashButton = document.createElement('button');
    trashButton.innerHTML="delete";
    trashButton.classList.add("complete-btn");
    toDoDiv.appendChild(trashButton);
    //append todo 
    toDoContainer.appendChild(tododiv);
    inputField.value= "";
    
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>to do list </title>
    <link rel="stylesheet" href="./style.css">
    
</head>

<body>

    <div class="container">
        <header>
            <h1>This is your to do list </h1>
            <div class="input">
                <input type="text" placeholder="what to do ...?" id="text">
                <input type="button" value="add" id="addButton">
            </div>
        </header>


        <div id="ToDoContainer">
                
                    
        </div>


    </div>
    <script src="./script.js"></script>
</body>

</html>

here is a screenshot

Answer 1

您的变量名为 toDoDiv，您在这一行（倒数第二行）中有错误：

toDoContainer.appendChild(tododiv);

这会起作用：

toDoContainer.appendChild(toDoDiv);

Answer 2

sonEtLumiere 是对的，你打错了。应该是：

toDoContainer.appendChild(toDoDiv);

输入字段不会清除

2 个答案: