input field won't clear up

user_14795811 0
Viewed 43

I can't clear up my input field even tho i followed a tutorial step by step , i'm making this to do list and I want the input field to be clear anytime i submit a new to do . so what is wrong with my code ? ps : i tried to clear the cache and nothing

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

dom html javascript
2 Answers

Your variable is called toDoDiv, you have an error in this line (penultimate line): 

toDoContainer.appendChild(tododiv);

This will work:

toDoContainer.appendChild(toDoDiv);

user_136623390

sonEtLumiere is right, you have a typo. It should be:

toDoContainer.appendChild(toDoDiv);
user_107612130
Related