0
242
ViewsCada vez que intento la función onclick, aparece un error de referencia
Estoy tratando de usar el evento al hacer clic en mi archivo javascript. Pero, cada vez que lo uso, dice que la función está declarada, pero nunca utilizada. ¿Me pueden ayudar a resolver este problema? Puede consultar el código a continuación, así como en la imagen.
let showtoDos = () => { let li = ""; if(toDos) { toDos.forEach((todo, id) => { li += `<li class="task"> <label for="${id}"> <input class="clicked" type="checkbox" id="${id}" /> <p>${todo.name}</p> </label> <div class="settings"> <i id="ellipsis" class="fa-solid fa-ellipsis"></i> <ul class="task-menu"> <li><i class="fa-solid fa-pen"></i>Edit</li> <li onclick="deleteTask(${id})" class="delete" ><i class="fa-solid fa-trash"></i>Delete</li> </ul> </div> </li>`; }); } taskBox.innerHTML = li; } showtoDos(); function deleteTask(deletedId) { console.log(deletedId); } 
Además, puede verificar en la imagen a continuación que, cada vez que hago clic en el botón Eliminar en el navegador, aparece un error de referencia.
2 answers
Answer question0
Tienes dos problemas diferentes allí:
- El IDE está validando su código mostrando advertencias y no puede encontrar ninguna línea que llame a esa función. El único punto al que apuntó esa función es cuando definió el atributo onclick del elemento li pero sucedió dentro de un literal de cadena y no cuenta para el linter. Puedes ignorar esto.
- El código javascript que tiene en ese archivo no se ejecutará en el ámbito global, por lo que la función definida allí no será visible para el elemento li cuando se active su evento. Debe intentar adjuntar un controlador de eventos a través de javascript para asegurarse de que el controlador se adjuntará hasta que aún tenga el control de ese alcance.
Justo después de showToDos() puede intentar ejecutar lo siguiente:
//for each delete list item document.querySelectorAll('li.task ul.task_menu li.delete') .forEach( (o, i) => { //bind an handler (deleteTask) for its click event (deleteTask should be in this scope now) o.addEventListener("click", deleteTask); });DESCARGO DE RESPONSABILIDAD:
Desafortunadamente, ese selector que usé con querySelectorAll obtendrá TODOS esos elementos, incluso aquellos que ya tienen el controlador adjunto (si ya existía alguno con los mismos criterios de selector). Antes de hacer addEventListener , una estrategia podría ser verificar si ya hay un controlador para ese evento en ese objeto.
Una mejor solución sería usar ese código html que creó con una cadena de plantilla, crear un árbol de elementos html desde allí y llamar a querySelectorAll (+attachEventHandler) desde dicho objeto antes de agregarlo a la caja de tareas. No sería necesario que realice ninguna verificación antes de adjuntar el controlador de eventos porque solo tendrá como objetivo los recién creados.
O podría, como alguien sugirió, hacer que esa función esté disponible en el ámbito global, pero no escalaría muy bien debido a las colisiones de nombres (esta es una de las formas inseguras de hacerlo):
var deleteTask = (/*args*/) => {/*code here*/}0
Debe colocar su función en el ámbito global (objeto de ventana en el navegador) si desea acceder a ella de esa manera, intente:
window.deleteTask = function (deletedId) { console.log(deletedId); }