Estoy tratando de borrar mi campo de entrada en mi lista simplificada de tareas, pero no puedo obtener mi código para borrar la entrada cuando agrego una nueva tarea.
Si observa el código JS, puede ver un código simple ( input.value = ""; ) para borrar la entrada pero no funciona. Además, la función IF que se supone que debe tener un mensaje de alerta si no coloca ningún texto en el campo de entrada tampoco funciona por alguna razón.
Realmente no entiendo cómo puedo hacer que funcionen, he estado buscando en W3 pero no puedo encontrar buenas respuestas.
<h2>To-do list!</h2> <div> <input type="text" id="task" placeholder="Write task" /> <button id="my-button">Add task</button> </div> <ul id="list"></ul> var btn = document.getElementById('my-button').onclick = function() { var ul = document.getElementById("list"); var li = document.createElement("li"); var input = document.getElementById('task').value; if (input != '') { addItem(); } function createDeleteButton() { var deleteButton = document.createElement('button'); deleteButton.classList.add("deleteButton"); deleteButton.textContent = "x"; deleteButton.addEventListener("click", removeItem); return deleteButton; } function addItem() { let listElement = document.createElement('li'); listElement.innerText = input; listElement.appendChild(createDeleteButton()); if (input.value != "") { list.appendChild(listElement) } else alert("Please write something"); input.value = ""; } function removeItem() { let parent = this.parentNode.parentNode; let child = this.parentNode; parent.removeChild(child); } }Hay algunos problemas con su código. Está envolviendo todas las funciones dentro del botón Agregar función onClick. No hay necesidad de hacer eso, complica las cosas.
Primero está verificando si la entrada está vacía, por lo que cuando se ejecuta la función addItem, el if else interno nunca se ejecutará:
} else alert("Please write something");¿Cómo hacerlo?
1 Declare los elementos que desea utilizar:
const ul = document.getElementById("list"); const input = document.getElementById("task"); const addBtn = document.getElementById("my-button");2 Haga que la función onClick de su botón Agregar haga solo lo que tiene que hacer: agregar un elemento .
addBtn.onclick = addItem;3 Declare la función addItem:
function addItem() { if (input.value !== "") { const listElement = document.createElement("li"); listElement.innerText = input.value; listElement.appendChild(createDeleteButton()); ul.appendChild(listElement); input.value = ""; } else { alert("Please write something"); } }La función addItem primero verifica si el valor de entrada está vacío y, si no lo está, hace todo en el bloque. Else ejecuta el bloque else (alerta).
Tenga en cuenta que al final del bloque if establecemos el valor de entrada en vacío con: input.value = "";
No los cambio porque funcionan. Simplemente téngalos todos fuera de la función addItem y use const en lugar de var (razones de alcance).
function createDeleteButton() { const deleteButton = document.createElement("button"); deleteButton.classList.add("deleteButton"); deleteButton.textContent = "x"; deleteButton.addEventListener("click", removeItem); return deleteButton; } function removeItem() { const parent = this.parentNode.parentNode; const child = this.parentNode; parent.removeChild(child); }======================
const ul = document.getElementById("list"); const input = document.getElementById("task"); const addBtn = document.getElementById("my-button"); addBtn.onclick = addItem; function addItem() { if (input.value !== "") { const listElement = document.createElement("li"); listElement.innerText = input.value; listElement.appendChild(createDeleteButton()); ul.appendChild(listElement); input.value = ""; } else { alert("Please write something"); } } function createDeleteButton() { const deleteButton = document.createElement("button"); deleteButton.classList.add("deleteButton"); deleteButton.textContent = "x"; deleteButton.addEventListener("click", removeItem); return deleteButton; } function removeItem() { const parent = this.parentNode.parentNode; const child = this.parentNode; parent.removeChild(child); }La entrada de var se define como task.value. Necesita obtener la tarea y luego cambiar task.value
function todolist(){ var btn = document.getElementById('my-button').onclick = function() { var ul = document.getElementById("list"); var li = document.createElement("li"); var input = document.getElementById('task').value; if (input != '') { addItem(); } function createDeleteButton() { var deleteButton = document.createElement('button'); deleteButton.classList.add("deleteButton"); deleteButton.textContent = "x"; deleteButton.addEventListener("click", removeItem); return deleteButton; } function addItem() { let listElement = document.createElement('li'); listElement.innerText = input; listElement.appendChild(createDeleteButton()); if (input != "") { list.appendChild(listElement) } else alert("Please write something"); var task = document.getElementById('task') console.log(task) task.value = "" input = ""; } function removeItem() { let parent = this.parentNode.parentNode; let child = this.parentNode; parent.removeChild(child); } } } todolist(); <h2>To-do list!</h2> <div> <input type="text" id="task" placeholder="Write task" /> <button id="my-button">Add task</button> </div> <ul id="list"></ul>En lugar de input.value = "" use input = ""