Comencé una lista de todos de la aplicación, después de crear el primer código simplemente agregando nuevos todos en DOM ahora mi tarea es esta: addtodo: // agarrar el valor de todo // poner tit en la matriz // decirle al método de dibujo que vuelva a dibujar todos
drawtodo: tome la matriz para cada texto y agregue una entrada de tareas pendientes en el documento
la matriz mi código html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <title>TodoList</title> </head> <body> <div class="todolist_box"> <h3> To Do List </h3> <div class="input"> <input type="text" id ="inp" placeholder="Add new Task"> <button onclick="newTodo()" ><i> enter </i></button> <button onclick="newTodo()" ><i> save </i></button> <button onclick="drawtodo()" ><i> load </i></button> </div> <ul id="myUL"> </ul> </div> <script src="script.js" type="application/javascript"></script> </body> </html>y este es mi codigo javascript
function newElement() { // this code doesn't work, but it gives you an idea const li = document.createElement("li") const newEntry = document.getElementById("inp").value const u = document.createTextNode(newEntry) li.appendChild(u) document.getElementById("myUL").appendChild(li) document.getElementById("inp").value = "Nothing" // something like thi let todos = [] function newTodo() { let inpvalue = document.getElementById('inp').value todos.push(inpvalue) // trigger draw event } function drawtodo() { for (var i = todos.length - 1; i >= 0; i--) { let li = document.createElement('li') let newlist = li.appendChild(document.createTextNode(todos[i])) inpvalue.appendChild(newlist) } } document.onload = function() { // this will excute when the document loads } }Intente usar el detector de eventos de Javascript en lugar del atributo onclick en html.
HTML:
<button id="load" ><i> load </i></button> // Se eliminó el atributo onclick
JS:
document.getElementById("load").addEventListener("click", drawtodo, false);Lo mismo ocurre con los botones Intro y Guardar, cuando se hace clic se activa la función newTodo.