Estoy tratando de hacer que mi botón para mi lista de tareas pendientes funcione durante días. El botón no funciona, pero no puedo averiguar cuál es el problema. No quiero usar "onclick" en el archivo html. Quiero hacer el evento de clic en el archivo javascript.
Y luego he estado tratando de descubrir cómo hacer que la lista de tareas pendientes funcione agregando nuevas tareas y poder marcar la tarea como completa sin eliminarla, pero fue más difícil de lo que pensé. Me encantaría obtener algunos punteros! lo aprecio chicos
var closebtn = document.getElementsByClassName("close"); function todolist(){ var li = document.createElement('li'); var btn = document.getElementById('my-button').onclick = function(){ var list = document.getElementById('list'); var input = document.getElementById('task').value; var func = addEventListener('my-button'); var textnode = documentcreateTextNode(input); li.appendChild(textnode); if (input === ' '){ alert("write") } else { document.getElementById(list).appendChild(li); } document.getElementById('task').value = " "; var thePanTag = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); thePanTag.className = "close"; thePanTag.appendChild(txt); li.appendChild(thePanTag); for (i = 0; i < closebtn.length; i++){ closebtn[i].onclick = function(){ var Div = this.parentElement; Div.style.display = none; }}}} <body> <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"> <li>kaa</li> <li>baa</li> <li>ss</li> <li>aa</li> <li>aaa</li> </ul>Eliminé el código innecesario y sé consciente de usar la función onlick correcta.
Prueba esto:
var closebtn = document.getElementsByClassName("close"); todolist(); function todolist(){ var li = document.createElement('li'); 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!=''){ li.appendChild(document.createTextNode(input)); ul.appendChild(li); } } } <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"> <li>kaa</li> <li>baa</li> <li>ss</li> <li>aa</li> <li>aaa</li> </ul>Esta es una sintaxis incorrecta para agregar un detector de eventos en un botón
var func = addEventListener('my-button');Este es el correcto :
const addTaskBtn = document.getElementByID("my-button") addTaskBtn.addEventListener("click",function()=>{ var li = document.createElement('li'); var btn = document.getElementById('my-button').onclick = function(){ var list = document.getElementById('list'); var input = document.getElementById('task').value; var func = addEventListener('my-button'); var textnode = documentcreateTextNode(input); })