输入字段不会清除

debugcn 发表于 Dev

ham

即使按照教程的步骤操作，我也无法清除输入字段，我将其列为待办事项，并且希望在我提交新内容时清除输入字段。那么我的代码有什么问题呢？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>

这是截图

米歇尔·帕拉迪斯（Michelle Paradis）

sonEtLumiere是对的，您有错字。它应该是：