Делаю to-do list на чистом js
Для удаления задачи я хочу использовать клик по картинке.
Однако возникла проблема, картинка появляется только после добавления задачи(то есть уже после загруки страницы и onload не срабатывает), как мне обратится к ней и подключить EVENT LISTENER.
Если проще, нужна либо замена jQuery(document).ready на JavaScript, либо какой-то способ создать функцию которая будет срабатывать при любом изменении на web странице
window.onload = function() {
var addTaskButton = document.getElementById('add-task-button');
var deleteTaskButton = document.getElementsByClassName('task-delete-button');
addTaskButton.addEventListener('click', createNewTask);
document.addEventListener("keyup", (keyPressed) => {
const keyEnter = 13;
if (keyPressed.which == keyEnter) {
createNewTask();
}
});
function taskCollector (){
let inputtext= document.getElementById("task-text");
let tasktext = inputtext.value;
const listitem = document.createElement("li");
const checkbox = document.createElement("input");
const span = document.createElement("span");
const img = document.createElement("img");
listitem.classList.add("list-item");
span.classList.add("task-text");
checkbox.type="checkbox";
img.src="bin.png";
listitem.classList.add("task");
img.classList.add("task-delete-button");
span.innerText = tasktext;
listitem.appendChild(checkbox);
listitem.appendChild(span);
listitem.appendChild(img);
return(listitem);
}
function createNewTask(){
let inputtext= document.getElementById("task-text");
if(inputtext.value == ""){
alert("Ввдите текст новой задачи!");
}else{
newtask = taskCollector();
let startlist = document.getElementById("listStart");
startlist.prepend(newtask);
document.getElementById("task-text").value = "";
}
}
function deleteTask(){
}
};