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>
sonEtLumiere is right, you have a typo. It should be:
toDoContainer.appendChild(toDoDiv);
1.4m articles
1.4m replys
5 comments
57.0k users
